243

उदाहरण:

<a href="example.com" title="My site"> Link </a>

मैं ब्राउज़र में "शीर्षक" विशेषता की प्रस्तुति को कैसे बदल सकता हूँ? डिफ़ॉल्ट रूप से, इसमें बस पीले रंग की पृष्ठभूमि और छोटे फ़ॉन्ट होते हैं। मैं इसे बड़ा बनाना और पृष्ठभूमि का रंग बदलना चाहूंगा।

शीर्षक विशेषता शैली के लिए एक सीएसएस तरीका है?

html css

— Kunpha
स्रोत

stackoverflow.com/questions/36275678/how-to-create-a-tooltip

— पूजा केदार

133

यह कैसे करना है इसका एक उदाहरण है:

a.tip {
    border-bottom: 1px dashed;
    text-decoration: none
}
a.tip:hover {
    cursor: help;
    position: relative
}
a.tip span {
    display: none
}
a.tip:hover span {
    border: #c0c0c0 1px dotted;
    padding: 5px 20px 5px 5px;
    display: block;
    z-index: 100;
    background: url(../images/status-info.png) #f0f0f0 no-repeat 100% 5%;
    left: 0px;
    margin: 10px;
    width: 250px;
    position: absolute;
    top: 10px;
    text-decoration: none
}

<a href="#" class="tip">Link<span>This is the CSS tooltip showing up when you mouse over the link</span></a>

स्निपेट का विस्तार करें

— वल्ली
स्रोत

FF में ठीक से काम नहीं करता है अगर टैग के बजाय टैग का उपयोग करें, उदाहरण के लिए, td

— dnim

6

उपरोक्त तकनीक के उदाहरण के लिए, विस्तृत विवरण के साथ, छह सेरविज़न.com/css/css-only-tooltips देखें ।

— जॉर्ज

1

जब मैं ऐसा करता हूं, तो मुझे एक डबल टूल टिप दिखाई देता है। स्टाइल वाला एक, और फिर कुछ ही समय बाद, यह एक के ऊपर एक अस्थिर हो जाता है। यह आपके फिडल पर है। मैं क्रोम का उपयोग कर रहा हूं। क्या यह असामान्यता है?

8

कोड में शीर्षक विशेषता के बिना एक उत्तर यहाँ 100 से अधिक upvotes है ...?

— बेन रेसिकोट

1

वास्तविक प्रश्न को भी संबोधित नहीं करता ... बू!

— मैट

126

ऐसा लगता है कि वास्तव में एक शुद्ध सीएसएस समाधान है, जिसमें केवल सीएसएस attrअभिव्यक्ति, उत्पन्न सामग्री और विशेषता चयनकर्ताओं की आवश्यकता होती है (जो यह बताता है कि यह IE8 के रूप में वापस काम करता है):

a[title]:hover:after {
  content: attr(title);
  position: absolute;
}

स्रोत: https://jsfiddle.net/z42r2vv0/2/

@ wiROscar से अपडेट w / इनपुट: कृपया ध्यान दें कि किसी विशिष्ट विशेषता का उपयोग करना आवश्यक नहीं है, हालांकि मैंने ऊपर के उदाहरण में "शीर्षक" विशेषता का उपयोग किया है; वास्तव में मेरी सिफारिश "alt" विशेषता का उपयोग करना होगा, क्योंकि कुछ मौका है कि सामग्री सीएसएस से लाभ उठाने में असमर्थ उपयोगकर्ताओं के लिए सुलभ होगी।

अपडेट फिर से मैं कोड नहीं बदल रहा हूं क्योंकि "शीर्षक" विशेषता मूल रूप से "टूलटिप" विशेषता का मतलब है, और यह संभव नहीं है कि केवल होवर पर एक क्षेत्र के अंदर महत्वपूर्ण पाठ को छिपाने के लिए एक अच्छा विचार है, लेकिन यदि आप हैं इस पाठ को "ऐरिया-लेबल" की विशेषता तक पहुँचाने में दिलचस्पी इसके लिए सबसे अच्छी जगह लगती है: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Un_the_aria-label_attribute

— जॉन जेड
स्रोत

11

और यदि आप मूल टूलटिप के लिए अंततः प्रदर्शित नहीं करना चाहते हैं, तो आप हमेशा "alt" टैग का उपयोग कर सकते हैं ..

— जॉन z

1

@Jonz मैंने एक कस्टम प्रॉपर्टी "डेटा-ऑल्ट = 'ऑल्ट" के साथ कोशिश की है और सब कुछ ठीक है। ऑल्ट या टाइटल प्रॉपर्टी का उपयोग करना आवश्यक नहीं है।

— विरोजकर

7

प्योर सीएसएस टूलटिप्स में गंभीर खराबी है - वे तत्व से बंधे हुए हैं, इस प्रकार इसकी सीमा होती है stacking context। नए स्टैकिंग संदर्भ केposition अलावा अन्य सभी तत्व और शुद्ध CSS टूलटिप्स बाहर दिखाई नहीं देते हैं और न ही ऐसे स्टैकिंग संदर्भ से परे जा सकते हैं , इसलिए यदि आपके पास स्थिति के साथ तंग तत्व है , तो आपका CSS टूलटिप दिखाई नहीं देगा। एकमात्र समाधान टूलटिप को शीर्ष स्टैकिंग संदर्भ (जैसे ) से संलग्न करना है, जिसे जावास्क्रिप्ट की आवश्यकता है। staticrelative<body>

— वाक्लाव नोवोत्नी

दुर्भाग्य से यह क्लिक पर गायब नहीं होता है।

— 23:

71

आप एक वास्तविक `title`विशेषता को स्टाइल नहीं कर सकते

titleविशेषता में पाठ कैसे प्रदर्शित होता है यह ब्राउज़र द्वारा परिभाषित किया गया है और ब्राउज़र से ब्राउज़र में भिन्न होता है। वेबपृष्ठ के लिए यह संभव नहीं है कि ब्राउज़र के आधार पर ब्राउज़र द्वारा प्रदर्शित टूलटिप में किसी भी शैली को लागू किया जाएtitle विशेषता के ।

हालाँकि, आप अन्य विशेषताओं का उपयोग करके कुछ समान बना सकते हैं।

आप सीएसएस और एक कस्टम विशेषता के साथ एक छद्म टूलटिप (उदाहरण के लिए) बना सकते हैं `data-title` ) के

इसके लिए, मैं एक data-titleविशेषता का उपयोग करूंगा । data-*विशेषताएँ DOM तत्वों / HTML में कस्टम डेटा संग्रहीत करने की एक विधि है। कर रहे हैं उन तक के बहुत से तरीके । महत्वपूर्ण रूप से, उन्हें सीएसएस द्वारा चुना जा सकता है।

यह देखते हुए कि आप CSS का उपयोग data-titleविशेषताओं के साथ तत्वों का चयन करने के लिए कर सकते हैं, फिर आप CSS का उपयोग :after(या :before) करने के लिए कर सकते हैं contentजिसमें विशेषता का मान हैattr() ।

स्टाइल टूलटिप उदाहरण

बड़ा और एक अलग पृष्ठभूमि रंग के साथ (प्रति प्रश्न अनुरोध):

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    background-color: #00FF00;
    color: #111;
    font-size: 150%;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -1.6em;
    left: 100%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

<a href="example.com" data-title="My site"> Link </a> with styled tooltip (bigger and with a different background color, as requested in the question)<br/>
<a href="example.com" title="My site"> Link </a> with normal tooltip

स्निपेट का विस्तार करें

अधिक विस्तृत स्टाइल ( इस ब्लॉग पोस्ट से अनुकूलित ):

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    position: absolute;
    bottom: -1.6em;
    left: 100%;
    padding: 4px 4px 4px 8px;
    color: #222;
    white-space: nowrap; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;  
    border-radius: 5px;  
    -moz-box-shadow: 0px 0px 4px #222;  
    -webkit-box-shadow: 0px 0px 4px #222;  
    box-shadow: 0px 0px 4px #222;  
    background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f8f8f8),color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -ms-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -o-linear-gradient(top, #f8f8f8, #cccccc);
    opacity: 0;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

<a href="example.com" data-title="My site"> Link </a> with styled tooltip<br/>
<a href="example.com" title="My site"> Link </a> with normal tooltip

स्निपेट का विस्तार करें

ज्ञात पहलु

एक वास्तविक titleटूलटिप के विपरीत , उपरोक्त सीएसएस द्वारा निर्मित टूलटिप आवश्यक रूप से पृष्ठ पर दिखाई देने की गारंटी नहीं है (अर्थात यह दृश्य क्षेत्र के बाहर हो सकता है)। दूसरी ओर, यह वर्तमान विंडो के भीतर होने की गारंटी है, जो कि वास्तविक टूलटिप के मामले में नहीं है।

इसके अलावा, छद्म-टूलटिप उस तत्व के सापेक्ष स्थित होता है, जहां उस तत्व पर माउस जहां होता है, उसके सापेक्ष छद्म-टूलटिप होता है। जहाँ आप छद्म-टूलटिप प्रदर्शित किया जाता है, वहां आप ठीक-ठाक करना चाहते हैं। तत्व के सापेक्ष एक ज्ञात स्थान पर दिखाई देने से स्थिति के आधार पर लाभ या कमियां हो सकती हैं।

आप ऐसे तत्वों का उपयोग `:before`या उपयोग नहीं कर सकते `:after`जो कंटेनर नहीं हैं

इस जवाब में एक अच्छी व्याख्या है "क्या मैं उपयोग कर सकता हूं: इनपुट क्षेत्र पर छद्म तत्व के पहले या बाद में?"

प्रभावी ढंग से, इसका मतलब है कि आप जैसे तत्वों पर सीधे इस विधि का उपयोग नहीं कर सकते हैं <input type="text"/>, <textarea/>, <img>, आदि आसान समाधान एक में तत्व यह है कि एक कंटेनर नहीं है रैप करने के लिए है <span>या <div>और कंटेनर पर छद्म टूलटिप है।

<span>एक गैर-कंटेनर तत्व को लपेटने पर एक छद्म टूलटिप का उपयोग करने के उदाहरण :

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    background-color: #00FF00;
    color: #111;
    font-size: 150%;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -1.6em;
    left: 100%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

.pseudo-tooltip-wrapper {
    /*This causes the wrapping element to be the same size as what it contains.*/
    display: inline-block;
}

Text input with a pseudo-tooltip:<br/>
<span class="pseudo-tooltip-wrapper" data-title="input type=&quot;text&quot;"><input type='text'></span><br/><br/><br/>
Textarea with a pseudo-tooltip:<br/>
<span class="pseudo-tooltip-wrapper" data-title="this is a textarea"><textarea data-title="this is a textarea"></textarea></span><br/>

स्निपेट का विस्तार करें

^{उपरोक्त लिंक किए गए ब्लॉग पोस्ट के कोड से (जो मैंने पहली बार यहां एक उत्तर में देखा था कि इसे ख़त्म कर दिया है), यह मुझे data-*विशेषता के बजाय एक विशेषता का उपयोग करने के लिए स्पष्ट दिखाई दिया title। ऐसा करने का सुझाव उस (अब हटाए गए) उत्तर पर स्नोस्टॉर्म द्वारा एक टिप्पणी में भी दिया गया था ।}

— Makyen
स्रोत

1

यह सवाल का जवाब नहीं हो सकता है, लेकिन यह अब तक का सबसे अच्छा समाधान है। धन्यवाद।

— जेजे लाबाजो

@JJLabajo इस पूरक के लिए धन्यवाद अब तक का सबसे अच्छा समाधान है। हालाँकि, मुझे यकीन नहीं है कि यह कैसे सवाल का जवाब नहीं देता है। सवाल कुछ ऐसा है जो अभी संभव नहीं है। यह उत्तर कहता है कि यह संभव नहीं है, लेकिन एक विकल्प प्रदान करता है जो ओपी की इच्छाओं के समान है।

— मकेन

मुझे लगता है कि यह समाधान तत्वों की तरह input[type='text']या पर लागू नहीं होता है textarea, लेकिन मुझे नहीं पता कि क्यों। क्या कोई समझा सकता है?

— चेसो

@ चेयो तुम सही हो, :beforeऔर :afterछद्म तत्व उन तत्वों पर काम नहीं करते हैं जो कंटेनर नहीं हैं। उत्तर में एक अच्छा स्पष्टीकरण है: क्या मैं उपयोग कर सकता हूं: इनपुट क्षेत्र पर छद्म तत्व के पहले या बाद में? इस पद्धति का उपयोग करने के लिए, उन तत्वों को लपेटना सबसे आसान है जो कंटेनर नहीं हैं <span>या <div>जिस पर आप data-titleविशेषता डालते हैं । आपको शायद यह भी उन्हें देने के लिए चाहता हूँ display: inline-block;कि के रूप में उन्हें के रूप में एक ही आकार कर देगा, <input>या <textarea>। मैंने एक उदाहरण के साथ इस उत्तर को अपडेट किया है।

— मकेन

यह उत्तर वास्तव में हमें सिखाता है कि क्या चल रहा है और सभी प्रकार की अच्छी तरह से संरचित पृष्ठभूमि की जानकारी प्रदान करता है।

— आईडोग्राम

26

CSS टूलटिप उपस्थिति को नहीं बदल सकता है। यह ब्राउज़र / ओएस-निर्भर है। यदि आप कुछ अलग चाहते हैं, तो आपको डिफ़ॉल्ट टूलटिप के बजाय तत्व पर होवर करते समय मार्कअप जनरेट करने के लिए जावास्क्रिप्ट का उपयोग करना होगा।

— cletus
स्रोत

22

इसे करने के लिए JS का उपयोग नहीं करना पड़ता है।

— 12'12

9

'आप नहीं कर सकते' के जवाब के साथ जोखिम यह है कि वे पुराने हो सकते हैं। (दूसरा जोखिम यह है कि आप सिर्फ यह नहीं जान सकते कि कैसे।)

— माइकल शीपर

12

मैंने सोचा कि मैं अपनी 20 लाइनों जावास्क्रिप्ट समाधान यहाँ पोस्ट करेंगे। यह सही नहीं है, लेकिन आपके टूलटिप्स से आपको जो कुछ भी चाहिए, उसके आधार पर यह उपयोगी हो सकता है।

इसका उपयोग कब करें

स्वचालित रूप से सभी HTML तत्वों के लिए टूलटिप को एक TITLEविशेषता के साथ परिभाषित किया गया है (इसमें भविष्य में दस्तावेज़ में गतिशील रूप से जोड़े गए तत्व शामिल हैं)
प्रत्येक टूलटिप के लिए कोई जावास्क्रिप्ट / HTML परिवर्तन या हैक की आवश्यकता नहीं है (बस TITLEविशेषता, शब्दार्थ स्पष्ट)
बहुत हल्का (लगभग 300 बाइट्स गिज़्ड और मिनीफाइड जोड़ा जाता है)
आप केवल एक बहुत ही मूल शैलीगत टूलटिप चाहते हैं

जब उपयोग करने के लिए नहीं

JQuery की आवश्यकता है, इसलिए यदि आप jQuery का उपयोग नहीं करते हैं तो इसका उपयोग न करें
नेस्टेड तत्वों के लिए खराब समर्थन जो दोनों में टूलटिप्स हैं
आपको एक ही समय में स्क्रीन पर एक से अधिक टूलटिप की आवश्यकता होती है
आपको कुछ समय बाद गायब होने के लिए टूलटिप की आवश्यकता होती है

कोड

// Use a closure to keep vars out of global scope
(function () {
    var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
    DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
    showAt = function (e) {
        var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
        $("#" + ID).html($(e.target).data(DATA)).css({
            position: "absolute", top: ntop, left: nleft
        }).show();
    };
    $(document).on("mouseenter", "*[title]", function (e) {
        $(this).data(DATA, $(this).attr("title"));
        $(this).removeAttr("title").addClass(CLS_ON);
        $("<div id='" + ID + "' />").appendTo("body");
        showAt(e);
    });
    $(document).on("mouseleave", "." + CLS_ON, function (e) {
        $(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
        $("#" + ID).remove();
    });
    if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());

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

अनुकूलित करें

आप varइसे थोड़ा अनुकूलित करने के लिए दूसरी पंक्ति में घोषणाओं को बदल सकते हैं ।

var ID = "tooltip"; // The ID of the styleable tooltip
var CLS_ON = "tooltip_ON"; // Does not matter, make it somewhat unique
var FOLLOW = true; // TRUE to enable mouse following, FALSE to have static tooltips
var DATA = "_tooltip"; // Does not matter, make it somewhat unique
var OFFSET_X = 20, OFFSET_Y = 10; // Tooltip's distance to the cursor

अंदाज

अब आप निम्नलिखित CSS का उपयोग करके अपने टूलटिप्स को स्टाइल कर सकते हैं:

#tooltip {
    background: #fff;
    border: 1px solid red;
    padding: 3px 10px;
}

— ChrisF
स्रोत

2

बहुत अच्छा काम करता है! एक मामूली बग के लिए फिक्स (यदि शीर्षक खाली है) यहाँ पाया जा सकता है: stackoverflow.com/questions/26702472/…

— Malasorte

यदि आप किसी तत्व पर तेजी से चलते हैं तो मुझे खाली टूलटिप मिल रही है, यहां तक कि ऊपर उल्लिखित बग फिक्स के साथ भी। यदि मैं $ (यह) .removeAttr ("शीर्षक") लेता हूं तो यह अनियमित है और रुक जाता है। लेकिन निश्चित रूप से मुझे थोड़ी देर के बाद मानक मदद मिल रही है।

— एलन विजय

10

मुझे यहाँ उत्तर मिल गया है: http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/

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

.tags {
  display: inline;
  position: relative;
}

.tags:hover:after {
  background: #333;
  background: rgba(0, 0, 0, .8);
  border-radius: 5px;
  bottom: -34px;
  color: #fff;
  content: attr(glose);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 350px;
}

.tags:hover:before {
  border: solid;
  border-color: #333 transparent;
  border-width: 0 6px 6px 6px;
  bottom: -4px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}

<a class="tags" glose="Text shown on hovering">Exposed text</a>

स्निपेट का विस्तार करें

— एन्ड्रेस चंदिया
स्रोत

7

कस्टम टूलटिप पैटर्न के लिए एक jsfiddle यहां है

यह CSS स्थिति निर्धारण और pseduo वर्ग चयनकर्ताओं पर आधारित है

छद्म वर्गों के क्रॉस-ब्राउज़र समर्थन के लिए एमडीएन डॉक्स की जाँच करें

    <!-- HTML -->
<p>
    <a href="http://www.google.com/" class="tooltip">
    I am a 
        <span> (This website rocks) </span></a>&nbsp; a developer.
</p>

    /*CSS*/
a.tooltip {
    position: relative;
}

a.tooltip span {
    display: none;    
}

a.tooltip:hover span, a.tooltip:focus span {
    display:block;
    position:absolute;
    top:1em;
    left:1.5em;
    padding: 0.2em 0.6em;
    border:1px solid #996633;
    background-color:#FFFF66;
    color:#000;
}

— प्रसून
स्रोत

5

देशी टूलटिप को स्टाइल नहीं किया जा सकता है।

कहा जा रहा है, आप कुछ पुस्तकालय का उपयोग कर सकते हैं जो शैलियों को अस्थायी परतों को दिखाते हैं जब तत्व मँडरा रहा होता है (देशी टूलटिप्स के बजाय, और उन्हें दबाकर) बहुत कम या कोई कोड संशोधन की आवश्यकता होती है ...

— पोंचा
स्रोत

मुझे नहीं लगता कि अगर किसी तत्व में कोई titleविशेषता है तो आप मूल टूलटिप्स को दबा सकते हैं । इसलिए यदि आप अपना टूलटिप कार्यान्वयन सेट करते हैं, तो data-tipइसके बजाय कुछ अन्य विशेषता (कहना ) का उपयोग करना बेहतर है title।

— जुक्का के। कोर्पेला

1

यदि आप इस घटना से

— जुड़ने के

1

मैं आपकी बात देख रहा हूं, लेकिन यह देशी टूलटिप्स की स्टाइलिंग के बारे में नहीं है; यह उनसे बचने के बारे में है (डोम को संशोधित करके)।

— जुक्का के। कोर्पेला

@ JukkaK.Korpela हां, और मैंने अपने पहले वाक्य में कहा कि यह असंभव था;)

— पोंचा

शीर्षक विशेषता का उपयोग करने और बाद में इसे साफ़ करने का लाभ यह है कि यदि उपयोगकर्ता जावास्क्रिप्ट अक्षम है तो टूलटिप अभी भी उपलब्ध है।

— JJJ

2

आप डिफ़ॉल्ट ब्राउज़र टूलटिप को स्टाइल नहीं कर सकते। लेकिन आप अपने स्वयं के कस्टम HTML टूलटिप्स बनाने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं।

— bfavaretto
स्रोत

-1

a[title="My site"] {
    color: red;
}

यह भी किसी भी विशेषता के साथ काम करता है जिसे आप उदाहरण के लिए जोड़ना चाहते हैं:

एचटीएमएल

<div class="my_class" anything="whatever">My Stuff</div>

सीएसएस

.my_class[anything="whatever"] {
    color: red;
}

इसे यहां देखें: http://jsfiddle.net/vpYWE/1/

— शाना।
स्रोत

14

वह शैली निर्दिष्ट शीर्षक के साथ एक तत्व; टूलटिप शीर्षक नहीं है जो ब्राउज़र प्रदर्शित करता है

— रॉलैंड शॉ

1

इसके अलावा, anythingएक मान्य HTML विशेषता नहीं है। कस्टम विशेषताओं के लिए data-विशेषताओं का उपयोग करें ।

— user4642212

एंकर टैग के अंदर शीर्षक विशेषता की शैली कैसे बदलें?

आप एक वास्तविक titleविशेषता को स्टाइल नहीं कर सकते

आप सीएसएस और एक कस्टम विशेषता के साथ एक छद्म टूलटिप (उदाहरण के लिए) बना सकते हैं data-title ) के

स्टाइल टूलटिप उदाहरण

ज्ञात पहलु

आप ऐसे तत्वों का उपयोग :beforeया उपयोग नहीं कर सकते :afterजो कंटेनर नहीं हैं

आप एक वास्तविक `title`विशेषता को स्टाइल नहीं कर सकते

आप सीएसएस और एक कस्टम विशेषता के साथ एक छद्म टूलटिप (उदाहरण के लिए) बना सकते हैं `data-title` ) के

आप ऐसे तत्वों का उपयोग `:before`या उपयोग नहीं कर सकते `:after`जो कंटेनर नहीं हैं