मैं jQuery का उपयोग करके होवर पर टूलटिप संदेश कैसे प्रदर्शित कर सकता हूं?

Question

जैसा कि शीर्षक में कहा गया है, मैं jQuery का उपयोग करके होवर पर टूलटिप संदेश कैसे प्रदर्शित कर सकता हूं?

Comments

जब तक यह एक गतिशील रूप से उत्पन्न तत्व या एक टूलटिप नहीं है, जिसकी सामग्री बदल सकती है, तो मैं title="My tooltipइस तत्व के साथ विशेषता का उपयोग करने का सुझाव

— दूंगा

कृपया देखें कि मैंने इसका परीक्षण निर्दोष रूप से किया है: stackoverflow.com/questions/11781665/…

— डैनियल एडेन्यू

Answer 1

मैं qTip का सुझाव देता हूं ।

Comments

qTip बहुत भारी है (55kb, कुछ पूरे JS चौखटे से ज्यादा)। HTML विशेषता का उपयोग करने के बारे में मनोचिकित्सा का उत्तर देखें। लेकिन अगर आप कुछ हल्का और सुंदर चाहते हैं, तो PowerTip नामक इस JQuery प्लगइन की जाँच करें, सिर्फ 12kb और पुराने ब्राउज़रों के साथ भी संगत - stevenbenner.github.com/jquery-powertip

— sdailey

अस्तित्व में नहीं, परित्यक्त

— पीटर क्रस

Answer 2

टूलटिप प्लगइन आपकी आवश्यकता के लिए बहुत भारी हो सकता है। बस अपने टूलटिप में जिस पाठ को दिखाना चाहते हैं, उसके साथ 'शीर्षक' विशेषता सेट करें।

$("#yourElement").attr('title', 'This is the hover-over text');

Comments

ध्यान दें कि आप अपने टूलटिप को HTML में सीधे विशेषता में भी डाल सकते हैं: <div id = "DivWithTooltip" class = "DivClass" शीर्षक = "आपका होवर संदेश">

— Mark Brittingham

यह मेरे लिए IE में काम नहीं किया! propइसके बजाय उपयोग करना था। $("#yourElement").prop('title', 'This is the hover-over text');

— SNag

हाय @psychotik। क्या इस शीर्षक को बोल्ड करना संभव है?

— krish___na

Answer 3

निम्नलिखित एक आकर्षण की तरह काम करेगा (यह मानते हुए कि आपके पास div / span / table / tr / td / etc है "id"="myId")

    $("#myId").hover(function() {
        $(this).css('cursor','pointer').attr('title', 'This is a hover text.');
    }, function() {
        $(this).css('cursor','auto');
    });

एक मानार्थ के रूप में, .css('cursor','pointer')हॉवर पर माउस पॉइंटर को बदल देगा।

Comments

Apeared टूलटिप पर शैली कैसे जोड़ें

— उत्पल

Answer 4

jQuery टूलटिप प्लगइन पर एक नज़र डालें । आप विभिन्न विकल्पों के लिए एक विकल्प ऑब्जेक्ट में पास कर सकते हैं।

अन्य वैकल्पिक टूलटिप प्लगइन्स भी उपलब्ध हैं, जिनमें से कुछ हैं

• Random.Next () का jQuery AJAX टूलटिप

• AJAX टूलटिप को dhtml अच्छा बनाता है

• clueTip

डेमो और प्रलेखन को देखें और कृपया अपने प्रश्न को अपडेट करें यदि आपके पास अपने कोड में उनका उपयोग करने के तरीके के बारे में विशिष्ट प्रश्न हैं।

Answer 5

आप बूटस्ट्रैप टूलटिप का उपयोग कर सकते हैं । इसे इनिशियलाइज़ करना न भूलें।

<span class="tooltip-r" data-toggle="tooltip" data-placement="left" title="Explanation">
inside span
</span>

बाईं ओर पाठ स्पष्टीकरण दिखाया जाएगा।

और इसे js के साथ चलाएं:

$('.tooltip-r').tooltip();

Answer 6

सिफारिश qTip और अन्य परियोजनाओं के काफी पुराने हैं जैसा कि मैंने उपयोग करने की अनुशंसा qTip2 के रूप में यह सबसे अप करने की तारीख है।

Answer 7

ToolTipster पर एक नज़र डालें

• प्रयोग करने में आसान
• लचीला
• कुछ अन्य टूलटिप प्लग इन की तुलना में काफी हल्का (39kB)
• अतिरिक्त स्टाइल के बिना बेहतर दिखता है
• पूर्वनिर्धारित विषयों का एक अच्छा सेट है

Answer 8

आप इसे किसी भी jQiuery का उपयोग किए बिना सिर्फ सीएसएस का उपयोग करके कर सकते हैं।

<a class="tooltips">
    Hover Me
    <span>My Tooltip Text</span>
</a>
<style>
    a.tooltips {
        position: relative;
        display: inline;
    }

        a.tooltips span {
            position: absolute;
            width: 200px;
            color: #FFFFFF;
            background: #000000;
            height: 30px;
            line-height: 30px;
            text-align: center;
            visibility: hidden;
            border-radius: 6px;
        }

            a.tooltips span:after {
                content: '';
                position: absolute;
                top: 100%;
                left: 35%;
                margin-left: -8px;
                width: 0;
                height: 0;
                border-top: 8px solid #000000;
                border-right: 8px solid transparent;
                border-left: 8px solid transparent;
            }

    a:hover.tooltips span {
        visibility: visible;
        opacity: 0.8;
        bottom: 30px;
        left: 50%;
        margin-left: -76px;
        z-index: 999;
    }
</style>

Comments

यह उत्तर प्रश्न का उत्तर देने के लिए नहीं है।

— डेविन फील्ड्स