मैं शुद्ध CSS का उपयोग करके "टूलटिप टेल" कैसे बना सकता हूं?

Question

मैं बस एक साफ सीएसएस चाल में आया था। फिडेल को देखें ...

.tooltiptail {
  display: block;
  border-color: #ffffff #a0c7ff #ffffff #ffffff;
  border-style: solid;
  border-width: 20px;
  width: 0px;
  height: 0px;
}
.anothertail {
  background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
  display: block;
  height: 29px;
  width: 30px;
}

<div>Cool Trick:
  <br />
  <div class="tooltiptail"></div>
</div>
<br />

<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>

यह थोड़ा तीर / त्रिकोण जैसा प्रभाव पैदा करता है, एक "टूलटिप पूंछ"। यह मेरे दिमाग को उड़ा देता है! मैं यह जानने में दिलचस्पी रखता हूँ कि यह कैसे काम करता है ?!

इसके अलावा, वहाँ इस तरह से एक प्रभाव बनाने के लिए इस सीएसएस चाल का विस्तार करने के लिए एक तरीका है:

यह एक दिलचस्प समस्या है। क्या यह केवल CSS का उपयोग करके किया जा सकता है, अभी के लिए छाया की अनदेखी कर रहा है?

---

अद्यतन १

मुझे अपने प्रारंभिक प्रश्न का हल मिल गया। यहां जानिए फेल्ड ...

http://jsfiddle.net/duZAx/7/

एचटीएमएल

<div style="position: relative;">Cool Trick:<br />
    <div class="tooltiptail"></div>
    <div class="tooltiptail2"></div>
</div>

सीएसएस

.tooltiptail {
    display: block;
    border-color: #ffffff #a0c7ff #ffffff #ffffff;
    border-style: solid;
    border-width: 20px;
    width: 0px;
    height: 0px;
}
.tooltiptail2 {
    display: block;
    border-color: transparent #ffffff transparent transparent;
    border-style: solid;
    border-width: 18px;
    width: 0px;
    height: 0px;
    position: relative;
    left: 4px;
    top: -38px;
}

अब, मैं शुद्ध CSS के उपयोग से ऊपर की छोटी तस्वीर की बिल्कुल कैसे नकल कर सकता हूं, जिसमें छाया भी शामिल है और यह क्रॉस-ब्राउज़र संगत है?

---

अद्यतन २

नीचे दिए गए उत्तरों के संयोजन के बाद यहां मेरा समाधान है। मैंने कई ब्राउज़रों में इसका परीक्षण नहीं किया है, लेकिन यह क्रोम में बहुत अच्छा लगता है।

http://jsfiddle.net/UnsungHero97/MZXCj/688/

एचटीएमएल

<div id="toolTip">
    <p>i can haz css tooltip</p>
    <div id="tailShadow"></div>
    <div id="tail1"></div>
    <div id="tail2"></div>
</div>

सीएसएस

#toolTip {
    background-color: #ffffff;
    border: 1px solid #73a7f0;
    width: 200px;
    height: 100px;
    margin-left: 32px;
    position:relative;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0px 0px 8px -1px black;
    -moz-box-shadow: 0px 0px 8px -1px black;
    -webkit-box-shadow: 0px 0px 8px -1px black;
}

#toolTip p {
    padding:10px;
}

#tailShadow {
    background-color: transparent;
    width: 4px;
    height: 4px;
    position: absolute;
    top: 16px;
    left: -8px;
    z-index: -10;
    box-shadow: 0px 0px 8px 1px black;
    -moz-box-shadow: 0px 0px 8px 1px black;
    -webkit-box-shadow: 0px 0px 8px 1px black;
}

#tail1 {
    width: 0px;
    height: 0px;
    border: 10px solid;
    border-color: transparent #73a7f0 transparent transparent;
    position:absolute;
    top: 8px;
    left: -20px;
}

#tail2 {
    width: 0px;
    height: 0px;
    border: 10px solid;
    border-color: transparent #ffffff transparent transparent;
    position:absolute;
    left: -18px;
    top: 8px;
}

---

Comments

इसमें कौन से ब्राउज़र काम करने चाहिए?

— तीस मिनट

इस बिंदु पर मुझे वास्तव में परवाह नहीं है :) मैं सिर्फ यह देखना चाहता हूं कि क्या यह संभव है! वास्तविक रूप से, मैं एक छवि का उपयोग करूंगा लेकिन मुझे चुनौती में दिलचस्पी है

— हिस्टेरो

यदि आउटलाइन के लिए स्तरित तत्वों और पिक्सेल-सही स्थिति का उपयोग किया जा रहा है, तो यह उल्लेखनीय होना चाहिए। छाया के साथ या उसके बिना?

— आर्क

@ अर्चिमेडिक्स ... पूरी तरह से सहमत हैं, लेकिन क्या आप इसे कर सकते हैं?

— हिस्टोरो

यह इतना सरल है फिर भी इतना बढ़िया, अच्छा है हिस्ट्रो!

— वेस्ले मर्च

Answer 1

यहां बॉक्स-शैडो के साथ एक उदाहरण दिया गया है, सभी नवीनतम संस्करण ब्राउज़रों को इसका समर्थन करना चाहिए

http://jsfiddle.net/MZXCj/1/

HTML:

<div id="toolTip">
    <p>i can haz css tooltip</p>
    <div id="tailShadow"></div>
    <div id="tail1"></div>
    <div id="tail2"></div>
</div>

सीएसएस:

body {font-family:Helvetica,Arial,sans-serif;}

#toolTip {
    position:relative;
}

#toolTip p {
    padding:10px;
    background-color:#f9f9f9;
    border:solid 1px #a0c7ff;
    -moz-border-radius:5px;-ie-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
}

#tailShadow {
    position:absolute;
    bottom:-8px;
    left:28px;
    width:0;height:0;
    border:solid 2px #fff;
    box-shadow:0 0 10px 1px #555;
}

#tail1 {
    position:absolute;
    bottom:-20px;
    left:20px;
    width:0;height:0;
    border-color:#a0c7ff transparent transparent transparent;
    border-width:10px;
    border-style:solid;
}

#tail2 {
    position:absolute;
    bottom:-18px;
    left:20px;
    width:0;height:0;
    border-color:#f9f9f9 transparent transparent transparent;
    border-width:10px;
    border-style:solid;
}

body {
  font-family: Helvetica, Arial, sans-serif;
}
#toolTip {
  position: relative;
}
#toolTip p {
  padding: 10px;
  background-color: #f9f9f9;
  border: solid 1px #a0c7ff;
  -moz-border-radius: 5px;
  -ie-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#tailShadow {
  position: absolute;
  bottom: -8px;
  left: 28px;
  width: 0;
  height: 0;
  border: solid 2px #fff;
  box-shadow: 0 0 10px 1px #555;
}
#tail1 {
  position: absolute;
  bottom: -20px;
  left: 20px;
  width: 0;
  height: 0;
  border-color: #a0c7ff transparent transparent transparent;
  border-width: 10px;
  border-style: solid;
}
#tail2 {
  position: absolute;
  bottom: -18px;
  left: 20px;
  width: 0;
  height: 0;
  border-color: #f9f9f9 transparent transparent transparent;
  border-width: 10px;
  border-style: solid;
}

<div id="toolTip">
  <p>i can haz css tooltip</p>
  <div id="tailShadow"></div>
  <div id="tail1"></div>
  <div id="tail2"></div>
</div>

Comments

बहुत बढ़िया! मेरे मन में एक नहीं बल्कि समान समाधान था, लेकिन समझा है कि सभी मैं :) +1 किया के बाद कुछ बनाने के लिए आलसी था

— BoltClock

@ मम्मुल्लीनेक्स ... महाकाव्य! जब मुझे मेरे उत्थान के विशेषाधिकार वापस मिलेंगे, तो मैं आपको

— Hristo

वाह महान! एक छोटा सा बग: टूलटिप के ऊपरी हिस्से में छाया भी थोड़ी सी दिखाई देती है

— इयूलियस कर्ट

@iuliux ... उस बग को z-index के साथ आसानी से तय किया जा सकता है :)

— Hristo

Answer 2

यहाँ अपने पहले प्रश्न का उत्तर देने के लिए एक स्पष्टीकरण है (मैं वास्तविक सीएसएस को दूसरों पर छोड़ दूंगा क्योंकि मैं आलसी हूं - कृपया उनके जवाबों को अपवोट करें जो आपको लगता है कि वोट के लायक हैं!)।

यह थोड़ा तीर / त्रिकोण जैसा प्रभाव पैदा करता है, एक "टूलटिप पूंछ"। यह मेरे दिमाग को उड़ा देता है! मैं यह जानने में दिलचस्पी रखता हूँ कि यह कैसे काम करता है ?!

1. जब अलग-अलग किनारे रंगों के साथ एक सीमा प्रदान करते हैं लेकिन एक ही शैली (आपके मामले में solid), आसन्न कोनों के प्रत्येक जोड़े को विभाजित करने वाला सीम एक विकर्ण रेखा है। यह काफी क्या के समान है आरेख यहाँ के दर्शाया गया है groove, ridge, insetऔर outsetबॉर्डर शैलियां।

   ध्यान दें कि जबकि सभी ब्राउज़र एक ही तरह से व्यवहार करते हैं और जब तक मैं याद रख सकता हूं, तब तक यह व्यवहार पूरी तरह से CSS2.1 कल्पना या CSS बैकग्राउंड और बॉर्डर्स मॉड्यूल में पूरी तरह से परिभाषित नहीं किया गया है। उत्तरार्द्ध में कोनों पर रंग और शैली के बदलावों का वर्णन करने वाला एक खंड होता है , और विवरण से यह प्रतीत होता है कि शून्य कोने की राडियों वाली सीमाओं के लिए, जो लाइन प्रदान की गई है वह वास्तव में एक पंक्ति है जो पैडिंग किनारे के कोने को कोने से जोड़ती है। बॉर्डर एज (परिणामस्वरूप समान-चौड़ाई की सीमाओं के लिए 45-डिग्री एंगल्ड लाइन), लेकिन कल्पना अभी भी चेतावनी देती है कि यह हमेशा मामला नहीं हो सकता है (विशेष रूप से चूंकि यह शून्य कोने के साथ सीमाओं के लिए भी स्पष्ट रूप से खाता नहीं है)। ¹

2. द्वारा सामग्री (मूल W3C) बॉक्स मॉडल , एक 40x40 क्षेत्र, 20-पिक्सेल सीमाओं से बनाया के साथ सामग्री आयाम 0x0 के रूप में परिभाषित किया जा रहा है।

3. विकर्ण रेखाओं के साथ एक वर्ग को अपने चार कोनों में शामिल करने से चार समकोण त्रिभुज बनते हैं, जिनका समकोण वर्ग के मध्य बिंदु पर मिलता है (नीचे देखें)।

4. .tooltiptailतत्व के कंटेनर की पृष्ठभूमि से मेल करने के लिए ऊपर, नीचे और बाईं ओर की सीमाएँ सफेद हैं , जबकि टूलटिप की पृष्ठभूमि के रंग से मेल खाने के लिए दाईं सीमा नीले रंग की एक छाया है:

   border-color: #ffffff #a0c7ff #ffffff #ffffff;

इसका परिणाम यह है, लेबल वाली सीमाओं के साथ, और सीमा रेखाओं को मेरे भरोसेमंद लाइन टूल का उपयोग करके जोड़ा गया है:

टूलटिप पूंछ को फिर से बनाना केवल टूलटिप रंग को चारों ओर स्विच करने की बात है। उदाहरण के लिए, यह एक पूंछ प्राप्त करेगा जो एक टिप के नीचे से जुड़ी है:

border-color: #a0c7ff #ffffff #ffffff #ffffff;

jsFiddle पूर्वावलोकन

---

¹ _{यदि आप मानकों के अनुपालन के लिए एक स्टिकर हैं, तो आप इस सब को हैक मान सकते हैं।}

Comments

लानत तेज टाइपिंग, उसी के बारे में कहना था ... +1

— easwee

ठीक है, मैं स्पष्ट रूप से पढ़ने के सवालों पर चूसता हूं। यह भी कहा "I'm not worried about the shadow yet"।

— १४:४४

@BoltClock ... जब मुझे मेरे अपोजिट विशेषाधिकार वापस मिलेंगे, तो मैं आपको एक +1

— Hristo

@BoltClock, क्या व्यवहार ब्राउज़रों के अनुरूप हैं? और w3c के अनुसार यह व्यवहार कितना मानक है?

— पचेरियर

@ स्पेसर: एक विकर्ण रेखा के रूप में कोने सीम को प्रस्तुत करने का विशिष्ट व्यवहार किसी भी कल्पना में परिभाषित नहीं है। व्यवहार ब्राउज़र के अनुरूप है और लंबे समय तक अपरिवर्तित बना हुआ है। मैं अपने उत्तर में इसे स्पष्ट करूँगा।

— BoltClock

Answer 3

मैं इस टूलटिप को केवल एक divतत्व के साथ करता हूं ।

HTML:

<div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent augue justo, venenatis non tincidunt sit amet, suscipit eget ligula.</div>

सीएसएस:

.tooltip{
    position: relative;
    border: 1px solid #73a7f0;
    width: 200px;
    margin-left: 20px;
    padding: 5px 14px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
    -webkit-box-shadow: -0px 0px 6px rgba(0, 0, 0, .7);
    -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
}
.tooltip:before{
    content: ' ';
    display: block;
    position: absolute;
    left: -8px;
    top: 15px;
    width: 14px;
    height: 14px;
    border-color: #73a7f0;
    border-width: 1px;
    border-style: none none solid solid;
    background-color: #fff;
    box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
    -webkit-box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
    -moz-box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

डेमो

स्पष्टीकरण:

मैं अन्य उदाहरणों की तरह सीमा के साथ अपनी सामान्य div है। पूंछ सीएसएस का एक सरल संयोजन है:

• मैं छद्म चयनकर्ता का उपयोग करता हूं: पहले (: काम ठीक होने के बाद भी)
• मैं पूंछ को दृश्यमान बनाने के लिए एक सफेद स्थान के साथ सामग्री को मजबूर करता हूं।
• मैं टूलटिप के किनारे के कोने को ठीक करने के लिए अपने बॉक्स को 45deg से घुमाता हूं
• आकार और स्थिति के लिए कोई आश्चर्य नहीं।
• मैं 2 पक्षों पर एक बॉर्डर जोड़ना चाहता हूं।
• और अंत में मैं बाहर की सीमा पर छाया जोड़ता हूं।

Comments

IE के लिए @ हिस्ट्रो मैं वास्तव में नहीं जानता कि कैसे करना है, लेकिन एक लेख देखें: samuli.hakoniemi.net/… लेकिन इसका लुक डिफरेंशियल होना ... "बॉन हिम्मत!"

— योएन

@ डबल्यू: आईई के संबंध में ... अगर मुझे इस आईई को संगत बनाने की आवश्यकता है, तो मैं सिर्फ छवियों और एक सशर्त स्टाइलशीट का उपयोग करूंगा :)

— हिस्टो

Answer 4

बिना छाया के टूलटिप

.abubble {
  position: relative;
  border: 1px solid #a0c7ff;
  width: 100px;
  height: 100px;
}
.ashadow {
  position: absolute;
  display: inline-block;
  background: transparent;
  width: 10px;
  height: 10px;
  left: 50px;
  top: 100px;
  -moz-box-shadow: 0px 10px 30px #000;
  -webkit-box-shadow: 0px 10px 30px #000;
  box-shadow: 0px 10px 30px #000;
}
.atail {
  position: absolute;
  display: inline-block;
  border-width: 20px;
  border-style: solid;
  border-color: #a0c7ff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: 30px;
  top: 100px;
}
.atail2 {
  position: relative;
  display: inline-block;
  border-width: 19px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: -19px;
  top: -20px;
}
.anothertail {
  background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
  display: block;
  height: 29px;
  width: 30px;
}

<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>

<div class="abubble">
  <div class="atail">
    <div class="atail2">
    </div>
  </div>
</div>

फिडल डेमो

---

छाया के साथ (WebKit में थोड़ा अजीब लगता है ... मुझे लगता है कि यह अनुकूलित होगा):

.abubble {
  position: relative;
  border: 1px solid #a0c7ff;
  width: 100px;
  height: 100px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
.ashadow {
  position: absolute;
  display: inline-block;
  background: transparent;
  width: 10px;
  height: 10px;
  left: -5px;
  top: -16px;
  -moz-box-shadow: 0px 10px 20px #000;
  -webkit-box-shadow: 0px 10px 20px #000;
  box-shadow: 0px 10px 20px #000;
}
.atail {
  position: absolute;
  display: inline-block;
  border-width: 20px;
  border-style: solid;
  border-color: #a0c7ff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: 30px;
  top: 100px;
}
.atail2 {
  position: relative;
  display: inline-block;
  border-width: 19px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: -19px;
  top: -20px;
}
.anothertail {
  background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
  display: block;
  height: 29px;
  width: 30px;
}

<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>

<div class="abubble">
  <div class="atail">
    <div class="ashadow"></div>
    <div class="atail2">
    </div>
  </div>
</div>

डेमो 1 , डेमो 2

Comments

@ अर्चिमेडिक्स ... कूल :) अब मैं यह करने के 2 तरीके जानता हूं, यदि आप छवियों का उपयोग करते हुए गिनती करते हैं तो 3। छाया प्रभाव के लिए जाने के लिए देखभाल?

— हिस्टोरो

@ अर्चिमेडिक्स ... बहुत अच्छा लग रहा है! जब मुझे मेरे उत्थान के विशेषाधिकार वापस मिलेंगे, तो मैं आपको

— Hristo

मेरे दूसरे समाधान के समान ही - मैंने IE6 में सीमा पार पारदर्शिता को ठीक करने में भी कामयाबी हासिल की - अभी भी ie6 में सीमा प्रदर्शित करने के लिए तीर के आवरण के लिए एक समाधान की आवश्यकता है।

— १६

Answer 5

क्रॉसब्रोसर दृष्टिकोण:

.tooltip {
  position:relative;
  padding:10px;
  border-bottom:1px solid #000;
  background:#ccc;
}

.arrow {
    background:transparent;
    display:inline-block;
    position:absolute;
    bottom:-20px;
    border-left:10px solid transparent;
    border-bottom:10px solid transparent;
    border-top:10px solid #000;
    border-right:10px solid transparent; 
}
.arrow i {
    display:inline-block;
    position:absolute;
    top:-10px;
    left:-9px;
    width:0;
    height:0;
    border-left:9px solid transparent;
    border-bottom:9px solid transparent;
    border-top:9px solid #ccc;
    border-right:9px solid transparent;
}
* html .arrow {
    border-bottom-color:white;
    border-left-color:white;
    border-right-color:white;
    filter: chroma(color=white);
}
* html .arrow i {
    border-bottom-color:white;
    border-left-color:white;
    border-right-color:white;
    filter: chroma(color=white);
}

<div class="tooltip">
    <span class="arrow"><i></i></span>
    Tooltip text that wants to be your friend.
</div>

यह IE7 + (IE6 में काम करता है filter: chroma(color=white);) से काम करता है ( लेकिन तीर के चारों ओर काली सीमा प्रदर्शित नहीं करेगा)।

IE6 तय:

* html .arrow {
        border-bottom-color:white;
        border-left-color:white;
        border-right-color:white;
        filter: chroma(color=white);

}
* html .arrow i
        {
        border-bottom-color:white;
        border-left-color:white;
        border-right-color:white;
        filter: chroma(color=white);
        }

यह IE6 द्वारा प्रस्तुत किए गए बदसूरत काले ट्रांसपेरेंसी को रंग देगा जिसे आप क्रोमा फ़िल्टर में निर्दिष्ट करते हैं (मैंने सफेद किया था इसलिए यह पृष्ठभूमि में गायब हो जाता है)।

---

CSS 3 दृष्टिकोण:

आप इसे CSS3 के रोटेशन के साथ कर सकते हैं, लेकिन गैर CSS3 के अनुरूप ब्राउज़रों में असफल रहेंगे:

.tooltip {
    position:relative;
    padding:10px;
    background:#ccc;
    border-bottom:1px solid #000;
}
.tooltip:before {
    content:"";
    display:block;
    width:10px;
    height:10px;
    position:absolute;
    bottom:-6px;
    border-left:1px solid #000;
    border-bottom:1px solid #000;
    background:#ccc;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

<div class="tooltip"> 
    Tooltip text that wants to be your friend.
</div>

Comments

@ समुद्र ... शांत !!! क्या आप css3 रोटेशन, ट्यूटोरियल के लिंक और अन्य संसाधनों पर कुछ और जानकारी दे पाएंगे?

— हिस्टोरो

@hristo - IE में रोटेशन के लिए एक dx फ़िल्टर है - लेकिन समस्या यह है कि यह केवल 4 मान लेता है - msdn.microsoft.com/en-us/library/ms532918%28v=vs.85%29.aspx

— easwee

@easwee ... मैं IE के बारे में बहुत चिंतित नहीं हूं, विशेष रूप से IE 6. यह इंगित करने के लिए धन्यवाद। किसी भी IE कीड़े को आसानी से एक सशर्त के साथ दूर किया जा सकता है :)

— हिस्टोरो

@hristo css3 रोटेशन केवल IE9 में समर्थित है - इसलिए आपको अभी भी ie7-8 की देखभाल करनी होगी जो कि अभी भी एक मानक कोड है। लेकिन यह एक शुरुआत है।

— easwee

@easwee ... कमाल है। अगर मुझे कभी ऐसा करने और इसे IE- संगत बनाने की आवश्यकता है, तो मैं एक छवि और एक सशर्त स्टाइलशीट का उपयोग करूंगा :) क्या आप css3 रोटेशन, ट्यूटोरियल के लिंक और अन्य संसाधनों पर कुछ और जानकारी प्रदान कर पाएंगे?

— हिस्टोरो

Answer 6

आप सीएसएस के छद्म तत्वों के पहले और बाद का उपयोग कर सकते हैं। एफओआर उदाहरण,: पहले एक त्रिकोण डालने के लिए इस्तेमाल किया जा सकता है और: एक आयत डालने के बाद। इन दोनों का संयोजन एक बुलबुला उपकरण टिप बनाता है

जैसे:

a[bubbletooltip]:before
{
    content: "";
    position: absolute;
    border-bottom: 21px solid #e0afe0;
    border-left: 21px solid transparent;
    border-right: 21px solid transparent;
    visibility: hidden;
    bottom: -20px;
    left: -12px;
}

a[bubbletooltip]:after
{
    position: absolute;
    content: attr(bubbletooltip);
    color: #FFF;
    font-weight:bold;
    bottom: -35px;
    left: -26px;
    white-space: nowrap;
    background: #e0afe0;
    padding: 5px 10px;
    -moz-border-radius: 6px;
    -webkit-border-radius:6px;
    -khtml-border-radius:6px;
    border-radius: 6px;
    visibility: hidden;
}

एक ऑनलाइन टूल http://www.careerbless.com/services/css/csstooltipcreator.php पर उपलब्ध है

Comments

क्यों एक कस्टम विशेषता और नहीं, कहते हैं title,?

— BoltClock

मैं कहूंगा कि aria-labelटूलटिप के लिए एक अधिक उपयुक्त कस्टम विशेषता है। इसके साथ title, आपको ब्राउज़र का डिफ़ॉल्ट टूलटिप रेंडरिंग (दृष्टिधारी उपयोगकर्ताओं के लिए वैसे भी) मिलता है।

— रिंक.टेंटेंड ।6

धन्यवाद। मैं भी उपयोग करने का प्रयास करता हूँ span:beforeऔर span:afterत्रिकोण बना सकते हैं और प्रति से जरूरत के रूप में समायोजित करने के लिए webblogsforyou.com/... ।

— इमयंकमोडी