अतिरिक्त जानकारी सेट करने के लिए टूलटिप का उपयोग किया जाता है। यह वेब पेज पर तब दिखाई देता है जब विज़िटर माउस पॉइंटर को किसी तत्व पर ले जाता है।
CSS का उपयोग करके टूलटिप बनाने के लिए कोड निम्नलिखित है -
उदाहरण
<!DOCTYPE html>
<html>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
}
.toolTip {
position: relative;
display: inline-block;
border-bottom: 3px double rgb(255, 0, 0);
}
.toolTip .toolText {
visibility: hidden;
width: 160px;
background-color: #721cd4;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
top: -35px;
left: -10px;
z-index: 1;
}
.toolTip:hover .toolText {
visibility: visible;
}
</style>
<body>
<h1>Css tooltip example</h1>
<div class="toolTip">
Hover over me
<span class="toolText">Some toolTip text</span>
</div>
<h2>Hover over the above text to see the tooltip</h2>
</body>
</html> आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
"मुझ पर होवर करें" टेक्स्ट के ऊपर होवर करने पर -
