मैं स्पैन एलिमेंट में टूल टिप कैसे जोड़ूं?

Question

निम्नलिखित कोड में, मैं चाहता हूं कि एक टूल-टिप सामने आए जब उपयोगकर्ता स्पैन को हटा दे, तो मैं यह कैसे कर सकता हूं? मैं किसी भी लिंक का उपयोग नहीं करना चाहता।

<span> text </span>

Answer 1

यहाँ सरल, बिल्ट-इन तरीका है:

<span title="My tip">text</span>

यह आपको सादा पाठ टूलटिप्स देता है। यदि आप रिच टूलटिप्स चाहते हैं, तो उनमें फ़ॉर्मेट किए गए HTML के साथ, आपको ऐसा करने के लिए लाइब्रेरी का उपयोग करने की आवश्यकता होगी। सौभाग्य से उन का भार हैं ।

Comments

लेकिन यह काम करता है अगर वहाँ अवधि में कोई पाठ नहीं है? उदाहरण के लिए एक बीजी छवि के साथ एक खाली अवधि कहें?

— औगिअवन २३'१३

@ यूजीएस: क्या आपको यकीन है कि आपका तत्व आकार है जो आपको लगता है कि यह है? इसे मेरी तरह गुलाबी पृष्ठभूमि देने की कोशिश करें। :-)

— रिचीहिंडले

बहुत बहुत धन्यवाद।! लेकिन मैंने सिर्फ tipsy.js का इस्तेमाल किया और यह बेहतर लग रहा है कि मुझे क्या चाहिए था। : D और यह लेख मेरे भ्रम में सहायता प्रदान करता है: htmlgoodies.com/tutorials/html_401/article.php/3479661/… जहाँ यह कहता है कि टूलटिप "पाठ" के लिए काम करता है

— AugiP

नमस्ते, क्या कोई स्पष्ट कर सकता है कि यह मानक कुछ / सभी HTML स्वादों में है?

— जोनाथन ने सैन्टोस

@ जोनाथन

— RichieHindle

Answer 2

शुद्ध सीएसएस के साथ कस्टम टूलटिप्स - कोई जावास्क्रिप्ट आवश्यक नहीं:

यहाँ उदाहरण (कोड के साथ) / पूर्ण स्क्रीन उदाहरण

डिफ़ॉल्ट titleविशेषता टूलटिप्स के विकल्प के रूप में , आप अपने कस्टम CSS टूलटिप्स :before/ :after छद्म तत्वों और HTML5 data-*विशेषताओं का उपयोग करके बना सकते हैं ।

दिए गए CSS का उपयोग करके, आप data-tooltipविशेषता का उपयोग करके एक टूलटिप को एक तत्व में जोड़ सकते हैं ।

आप data-tooltip-positionविशेषता (स्वीकृत मान: top/ right/ bottom/ left) का उपयोग करके कस्टम टूलटिप की स्थिति को भी नियंत्रित कर सकते हैं ।

उदाहरण के लिए, निम्नलिखित स्पैन एलिमेंट के नीचे स्थित टूलटॉप को जोड़ेगा।

<span data-tooltip="Custom tooltip text." data-tooltip-position="bottom">Custom bottom tooltip.</span>

यह कैसे काम करता है?

आप attr()फ़ंक्शन का उपयोग करके कस्टम विशेषता मान प्राप्त करके छद्म तत्वों के साथ कस्टम टूलटिप्स प्रदर्शित कर सकते हैं ।

[data-tooltip]:before {
    content: attr(data-tooltip);
}

टूलटिप की स्थिति के संदर्भ में, बस विशेषता चयनकर्ता का उपयोग करें और विशेषता के मूल्य के आधार पर प्लेसमेंट को बदलें।

यहाँ उदाहरण (कोड के साथ) / पूर्ण स्क्रीन उदाहरण

उदाहरण में प्रयुक्त पूर्ण सीएसएस - इसे अपनी आवश्यकताओं के लिए अनुकूलित करें।

[data-tooltip] {
    display: inline-block;
    position: relative;
    cursor: help;
    padding: 4px;
}
/* Tooltip styling */
[data-tooltip]:before {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1.4;
    min-width: 100px;
    text-align: center;
    border-radius: 4px;
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
/* Dynamic vertical centering */
[data-tooltip-position="right"]:before,
[data-tooltip-position="left"]:before {
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
[data-tooltip-position="top"]:before {
    bottom: 100%;
    margin-bottom: 6px;
}
[data-tooltip-position="right"]:before {
    left: 100%;
    margin-left: 6px;
}
[data-tooltip-position="bottom"]:before {
    top: 100%;
    margin-top: 6px;
}
[data-tooltip-position="left"]:before {
    right: 100%;
    margin-right: 6px;
}

/* Tooltip arrow styling/placement */
[data-tooltip]:after {
    content: '';
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
    left: 50%;
    margin-left: -6px;
}
/* Dynamic vertical centering for the tooltip */
[data-tooltip-position="right"]:after,
[data-tooltip-position="left"]:after {
    top: 50%;
    margin-top: -6px;
}
[data-tooltip-position="top"]:after {
    bottom: 100%;
    border-width: 6px 6px 0;
    border-top-color: #000;
}
[data-tooltip-position="right"]:after {
    left: 100%;
    border-width: 6px 6px 6px 0;
    border-right-color: #000;
}
[data-tooltip-position="bottom"]:after {
    top: 100%;
    border-width: 0 6px 6px;
    border-bottom-color: #000;
}
[data-tooltip-position="left"]:after {
    right: 100%;
    border-width: 6px 0 6px 6px;
    border-left-color: #000;
}
/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    display: block;
    z-index: 50;
}

Comments

@SearchForKnowledge सच में? मैं कुछ बिंदु पर उस में देखूंगा। धन्यवाद।

— जोश क्रॉजियर

हाँ, मैंने अभी-अभी इसका परीक्षण किया और यह भी आश्चर्यचकित नहीं था कि यह काम नहीं किया था। पुराना आईई! ;)

— खोजफोरकोनाजेल

@ जोशक्रॉजियर ने इसकी बहुत मदद की

— JIBIN BJ

Answer 3

अधिकांश ब्राउज़रों में, शीर्षक विशेषता एक टूलटिप के रूप में प्रस्तुत करेगा, और आम तौर पर लचीला है कि यह किस प्रकार के तत्वों के साथ काम करेगा।

<span title="This will show as a tooltip">Mouse over for a tooltip!</span>
<a href="http://www.stackoverflow.com" title="Link to stackoverflow.com">stackoverflow.com</a>
<img src="something.png" alt="Something" title="Something">

उन सभी के लिए हर ब्राउज़र में टूलटिप को प्रस्तुत करना होगा।

Answer 4

मूल टूलटिप के लिए, आप चाहते हैं:

<span title="This is my tooltip"> Hover on me to see tooltip! </span>

Answer 5

"title"ब्राउज़र द्वारा टूलटिप के पाठ के रूप में विशेषता का उपयोग किया जाएगा, यदि आप कुछ प्लगइन्स का उपयोग करने पर विचार करने के लिए शैली लागू करना चाहते हैं