मेरे पास इस तरह से एक div टैग है:
<div>
<label>Name</label>
<input type="text"/>
</div>
मैं :hoverdiv पर टूलटिप कैसे प्रदर्शित कर सकता हूं , अधिमानतः फीका / आउट प्रभाव के साथ।
जवाबों:
मूल टूलटिप के लिए, आप चाहते हैं:
<div title="This is my tooltip">एक कट्टर जावास्क्रिप्ट संस्करण के लिए, आप इसमें देख सकते हैं:
https://jqueryhouse.com/best-jquery-tooltip-plugins/
उपरोक्त लिंक आपको टूलटिप्स के लिए 25 विकल्प देता है।
<abbr title="...">...</abbr>इसके बजाय उपयोग करें ; ब्राउज़र आमतौर पर इसे डैश / डॉट्स के साथ रेखांकित करते हैं, यह दर्शाता है कि "बताने के लिए और भी कुछ है, मेरा टूलटिप देखें"।
यह केवल CSS के साथ किया जा सकता है , कोई जावास्क्रिप्ट बिल्कुल भी नहीं : रनिंग डेमो
एक कस्टम HTML विशेषता लागू करें, उदाहरण के लिए। data-tooltip="bla bla"आपकी वस्तु (div या जो भी हो):
<div data-tooltip="bla bla">
something here
</div>
पारदर्शी होने के लिए :beforeप्रत्येक [data-tooltip]वस्तु के छद्म निर्धारण को परिभाषित करें , बिल्कुल तैनात और data-tooltip=""सामग्री के रूप में मूल्य के साथ :
[data-tooltip]:before {
position : absolute;
content : attr(data-tooltip);
opacity : 0;
}
इसे दिखाई देने के लिए :hover:beforeप्रत्येक की होवरिंग स्थिति को परिभाषित करें [data-tooltip]:
[data-tooltip]:hover:before {
opacity : 1;
}
टूलटिप ऑब्जेक्ट पर अपनी शैलियों (रंग, आकार, स्थिति आदि) को लागू करें; काहानि का अंत।
डेमो में मैंने यह निर्दिष्ट करने के लिए एक और नियम निर्धारित किया है कि क्या टूलटिप को गायब हो जाना चाहिए, जब वह उसके ऊपर मँडराता है, लेकिन माता-पिता के बाहर, किसी अन्य कस्टम विशेषता के साथ data-tooltip-persistent, और एक साधारण नियम:
[data-tooltip]:not([data-tooltip-persistent]):before {
pointer-events: none;
}
नोट 1: इसके लिए ब्राउज़र कवरेज बहुत व्यापक है, लेकिन पुराने IE के लिए जावास्क्रिप्ट फ़ॉलबैक (यदि आवश्यक हो) का उपयोग करने पर विचार करें।
नोट 2: एक वृद्धि माउस स्थिति की गणना करने और छद्म तत्वों में इसे जोड़ने के लिए एक जावास्क्रिप्ट जोड़कर हो सकता है, इस पर लागू एक वर्ग को बदलकर।
<br>और अन्य जैसे \nया \rजैसे ये बाकी स्ट्रिंग में सादे पाठ के रूप में दिखाई देते हैं। अपडेट: मैंने अभी देखा कि अधिकतम-चौड़ाई सेट करने से यह अपनी सामग्री को स्वचालित रूप से समायोजित करता है और लाइन ब्रेक लगाता है। वास्तव में साफ! (हालांकि, अगर किसी को कोई जवाब पता है, तो मैं अभी भी उसकी सराहना
आपको इसके लिए जावास्क्रिप्ट की आवश्यकता नहीं है; बस titleविशेषता सेट करें :
<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>
ध्यान दें कि टूलटिप की दृश्य प्रस्तुति ब्राउज़र / ओएस निर्भर है, इसलिए इसमें फीका पड़ सकता है और यह नहीं हो सकता है। हालांकि, टूलटिप्स करने का यह अर्थपूर्ण तरीका है, और यह स्क्रीन रीडर जैसे एक्सेसिबिलिटी सॉफ्टवेयर के साथ सही तरीके से काम करेगा।
<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>titleविशेषता इसे काटती नहीं है।
titleकाम करने की आवश्यकता है। ऐसे अन्य उत्तर हैं जो अधिक जटिल हैं यदि आपको कुछ अधिक जटिल चाहिए। मैं ईमानदारी से यह सुनिश्चित नहीं कर पा रहा हूँ कि आप यहाँ क्या बनाने की कोशिश कर रहे हैं।
यहाँ एक अच्छा jQuery टूलटिप है:
इसे लागू करने के लिए, बस इन चरणों का पालन करें:
इस कोड को अपने <head></head>टैग में जोड़ें :
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script type="text/javascript">
$("[title]").tooltip();
</script>
<style type="text/css">
/* tooltip styling. by default the element to be styled is .tooltip */
.tooltip {
display:none;
background:transparent url(https://dl.dropboxusercontent.com/u/25819920/tooltip/black_arrow.png);
font-size:12px;
height:70px;
width:160px;
padding:25px;
color:#fff;
}
</style> HTML तत्वों पर जिन्हें आप टूलटिप करना चाहते हैं, बस इसमें एक titleविशेषता जोड़ें । शीर्षक विशेषता में जो भी पाठ है वह टूलटिप में होगा।
नोट: जब जावास्क्रिप्ट अक्षम होता है, तो यह डिफ़ॉल्ट ब्राउज़र / ऑपरेटिंग सिस्टम टूलटिप पर वापस आ जाएगा।
मैंने कुछ ऐसा किया जो एक डिव के रूप में अच्छी तरह से करने में सक्षम होना चाहिए।
एचटीएमएल
<td>
<%# (Eval("Name").ToString().Length > 65) ? Eval("Name").ToString().Substring(0, 60) + "..." : Eval("Name")%>
<span class="showonhover">
<a href="#"><%# (Eval("Name").ToString().Length > 65) ? "More" : "" %></a>
<span class="hovertext">
<%# Eval("Name") %>
</span>
</span>
</td>सीएसएस
.showonhover .hovertext { display: none;}
.showonhover:hover .hovertext {display: inline;}
a.viewdescription {color:#999;}
a.viewdescription:hover {background-color:#999; color: White;}
.hovertext {position:absolute;z-index:1000;border:1px solid #ffd971;background-color:#fffdce;padding:11px;width:150px;font-size: 0.75em;}अधिक गहन चर्चा के लिए, मेरी पोस्ट देखें:
यहाँ एक शुद्ध CSS 3 कार्यान्वयन (वैकल्पिक JS के साथ) है
केवल एक चीज जो आपको करनी है, वह है "डेटा-टूलटिप" नामक किसी भी डिव पर एक विशेषता सेट करना और जब आप उस पर होवर करते हैं, तो यह टेक्स्ट उसके बगल में प्रदर्शित होगा।
मैंने कुछ वैकल्पिक जावास्क्रिप्ट को शामिल किया है जिससे टूलटिप को कर्सर के पास प्रदर्शित किया जा सकेगा। यदि आपको इस सुविधा की आवश्यकता नहीं है, तो आप इस फिडेल के जावास्क्रिप्ट भाग को सुरक्षित रूप से अनदेखा कर सकते हैं।
यदि आप नहीं चाहते कि फीका-होवर राज्य पर, बस संक्रमण गुण हटा दें ।
यह titleसंपत्ति टूलटिप की तरह स्टाइल है । यहाँ JSFiddle: http://jsfiddle.net/toe0hcyn/1/
HTML उदाहरण:
<div data-tooltip="your tooltip message"></div>सीएसएस:
*[data-tooltip] {
position: relative;
}
*[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
top: -20px;
right: -20px;
width: 150px;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-ms-transition: opacity .15s ease-in-out;
-o-transition: opacity .15s ease-in-out;
transition: opacity .15s ease-in-out;
display: block;
font-size: 12px;
line-height: 16px;
background: #fefdcd;
padding: 2px 2px;
border: 1px solid #c0c0c0;
box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.4);
}
*[data-tooltip]:hover::after {
opacity: 1;
}माउस स्थिति-आधारित टूलटिप स्थान परिवर्तन के लिए वैकल्पिक जावास्क्रिप्ट:
var style = document.createElement('style');
document.head.appendChild(style);
var matchingElements = [];
var allElements = document.getElementsByTagName('*');
for (var i = 0, n = allElements.length; i < n; i++) {
var attr = allElements[i].getAttribute('data-tooltip');
if (attr) {
allElements[i].addEventListener('mouseover', hoverEvent);
}
}
function hoverEvent(event) {
event.preventDefault();
x = event.x - this.offsetLeft;
y = event.y - this.offsetTop;
// Make it hang below the cursor a bit.
y += 10;
style.innerHTML = '*[data-tooltip]::after { left: ' + x + 'px; top: ' + y + 'px }'
}ठीक है, यहाँ आपकी सभी भरपूर ज़रूरतें पूरी हुईं:
यहाँ एक डेमो और मेरे कोड का लिंक है (JSFiddle)
यहाँ विशेषताएँ हैं जिन्हें मैंने इस विशुद्ध रूप से JS, CSS और HTML5 फ़ाइडल में शामिल किया है:
HTML:
<div id="wrapper">
<div id="a">Hover over this div to see a cool tool tip!</div>
</div>सीएसएस:
#a{
background-color:yellow;
padding:10px;
border:2px solid red;
}
.tooltip{
background:black;
color:white;
padding:5px;
box-shadow:0 0 10px 0 rgba(0, 0, 0, 1);
border-radius:10px;
opacity:0;
}जावास्क्रिप्ट:
var div = document.getElementById('wrapper');
var a = document.getElementById("a");
var fadeSpeed = 25; // a value between 1 and 1000 where 1000 will take 10
// seconds to fade in and out and 1 will take 0.01 sec.
var tipMessage = "The content of the tooltip...";
var showTip = function(){
var tip = document.createElement("span");
tip.className = "tooltip";
tip.id = "tip";
tip.innerHTML = tipMessage;
div.appendChild(tip);
tip.style.opacity="0"; // to start with...
var intId = setInterval(function(){
newOpacity = parseFloat(tip.style.opacity)+0.1;
tip.style.opacity = newOpacity.toString();
if(tip.style.opacity == "1"){
clearInterval(intId);
}
}, fadeSpeed);
};
var hideTip = function(){
var tip = document.getElementById("tip");
var intId = setInterval(function(){
newOpacity = parseFloat(tip.style.opacity)-0.1;
tip.style.opacity = newOpacity.toString();
if(tip.style.opacity == "0"){
clearInterval(intId);
tip.remove();
}
}, fadeSpeed);
tip.remove();
};
a.addEventListener("mouseover", showTip, false);
a.addEventListener("mouseout", hideTip, false);आप एक डेटा विशेषता, छद्म तत्वों और content: attr()उदाहरण के लिए कस्टम सीएसएस टूलटिप्स बना सकते हैं ।
http://jsfiddle.net/clintioo/gLeydk0k/11/
<div data-tooltip="This is my tooltip">
<label>Name</label>
<input type="text" />
</div>।
div:hover:before {
content: attr(data-tooltip);
position: absolute;
padding: 5px 10px;
margin: -3px 0 0 180px;
background: orange;
color: white;
border-radius: 3px;
}
div:hover:after {
content: '';
position: absolute;
margin: 6px 0 0 3px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-right: 10px solid orange;
border-bottom: 5px solid transparent;
}
input[type="text"] {
width: 125px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}सबसे सरल तरीका यह होगा position: relativeकि इसमें मौजूद तत्व और position: absoluteकंटेनर के अंदर टूलटिप तत्व पर इसे माता-पिता (तत्व से युक्त) के सापेक्ष तैरने के लिए सेट किया जाए । उदाहरण के लिए:
<div style="background: yellow;">
<div style="display: inline-block; position: relative; background: pink;">
<label>Name</label>
<input type="text" />
<div style="background: #e5e5e5; position: absolute; top: -10px; left: 0; right: 0;">
Tooltip text
</div>
</div>
</div>आप शीर्षक का उपयोग कर सकते हैं। यह बस के बारे में सब कुछ के लिए काम करेंगे
<div title="Great for making new friends through cooperation.">
<input script=JavaScript type=button title="Click for a compliment" onclick="window.alert('Your hair reminds me of a sunset across a prairie')" value="making you happy">
<table title="Great job working for those who understand the way i feel">
बस किसी भी टैग के बारे में सोचें जो html विंडो में दिखाई दे सकता है और title="whatever tooltip you'd like"अंदर टैग लगा सकता है और आपने खुद को टूलटिप प्राप्त कर लिया है।
आप इस दौरान onmouseoverऔर onmouseoutइस तरह से एक बाल दिवस को टॉगल कर सकते हैं :
function Tooltip(el, text) {
el.onmouseover = function() {
el.innerHTML += '<div class="tooltip">' + text + '</div>'
}
el.onmouseout = function() {
el.removeChild(el.querySelector(".tooltip"))
}
}
//Sample Usage
Tooltip(document.getElementById("mydiv"),"hello im a tip div")<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI tooltip</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(function() {
$("#tooltip").tooltip();
});
</script>
</head>
<body>
<div id="tooltip" title="I am tooltip">mouse over me</div>
</body>
</html>आप टूलटिप शैली को भी कस्टमाइज़ कर सकते हैं। कृपया इस लिंक को देखें: http://jqueryui.com/tooltip/#custom-style
एक CSS3- केवल समाधान हो सकता है:
CSS3:
div[id^="tooltip"]:after {content: attr(data-title); background: #e5e5e5; position: absolute; top: -10px; left: 0; right: 0; z-index: 1000;}एचटीएमएल 5:
<div style="background: yellow;">
<div id="tooltip-1" data-title="Tooltip Text" style="display: inline-block; position: relative; background: pink;">
<label>Name</label>
<input type="text" />
</div>
</div>आप फिर tooltip-2उसी तरह एक div बना सकते हैं ... आप निश्चित रूप से titleविशेषता के बजाय विशेषता का उपयोग कर सकते हैं data।
[id^=tooltip]चयनकर्ता का उपयोग करें जब आप सिर्फ एक वर्ग और इस्तेमाल किया जा सकता है .tooltip?
div[data-title])लिए अतिरिक्त मार्कअप को जोड़ने के बिना) का चयन करने के लिए उस मामले के लिए एक विशेषता चयनकर्ता का उपयोग भी कर सकते थे ।
इसे इस्तेमाल करे। आप इसे केवल सीएसएस के साथ कर सकते हैं और मैंने data-titleटूलटिप के लिए केवल विशेषता जोड़ी है ।
.tooltip{
position:relative;
display: inline-block;
}
.tooltip[data-title]:hover:after {
content: attr(data-title);
padding: 4px 8px;
color: #fff;
position: absolute;
left: 0;
top: 110%;
white-space: nowrap;
border-radius: 5px;
background:#000;
}<div data-title="My tooltip" class="tooltip">
<label>Name</label>
<input type="text"/>
</div>
मैंने तीन प्रकार के फीका प्रभाव विकसित किए हैं:
/* setup tooltips */
.tooltip {
position: relative;
}
.tooltip:before,
.tooltip:after {
display: block;
opacity: 0;
pointer-events: none;
position: absolute;
}
.tooltip:after {
border-right: 6px solid transparent;
border-bottom: 6px solid rgba(0,0,0,.75);
border-left: 6px solid transparent;
content: '';
height: 0;
top: 20px;
left: 20px;
width: 0;
}
.tooltip:before {
background: rgba(0,0,0,.75);
border-radius: 2px;
color: #fff;
content: attr(data-title);
font-size: 14px;
padding: 6px 10px;
top: 26px;
white-space: nowrap;
}
/* the animations */
/* fade */
.tooltip.fade:after,
.tooltip.fade:before {
transform: translate3d(0,-10px,0);
transition: all .15s ease-in-out;
}
.tooltip.fade:hover:after,
.tooltip.fade:hover:before {
opacity: 1;
transform: translate3d(0,0,0);
}
/* expand */
.tooltip.expand:before {
transform: scale3d(.2,.2,1);
transition: all .2s ease-in-out;
}
.tooltip.expand:after {
transform: translate3d(0,6px,0);
transition: all .1s ease-in-out;
}
.tooltip.expand:hover:before,
.tooltip.expand:hover:after {
opacity: 1;
transform: scale3d(1,1,1);
}
.tooltip.expand:hover:after {
transition: all .2s .1s ease-in-out;
}
/* swing */
.tooltip.swing:before,
.tooltip.swing:after {
transform: translate3d(0,30px,0) rotate3d(0,0,1,60deg);
transform-origin: 0 0;
transition: transform .15s ease-in-out, opacity .2s;
}
.tooltip.swing:after {
transform: translate3d(0,60px,0);
transition: transform .15s ease-in-out, opacity .2s;
}
.tooltip.swing:hover:before,
.tooltip.swing:hover:after {
opacity: 1;
transform: translate3d(0,0,0) rotate3d(1,1,1,0deg);
}
/* basic styling: has nothing to do with tooltips: */
h1 {
padding-left: 50px;
}
ul {
margin-bottom: 40px;
}
li {
cursor: pointer;
display: inline-block;
padding: 0 10px;
} <h1>FADE</h1>
<div class="tooltip fade" data-title="Hypertext Markup Language">
<label>Name</label>
<input type="text"/>
</div>
<h1>EXPAND</h1>
<div class="tooltip expand" data-title="Hypertext Markup Language">
<label>Name</label>
<input type="text"/>
</div>
<h1>SWING</h1>
<div class="tooltip swing" data-title="Hypertext Markup Language">
<label>Name</label>
<input type="text"/>
</div>
यहां एक सरल टूलटिप कार्यान्वयन है जो आपके माउस की स्थिति के साथ-साथ आपकी खिड़की की ऊंचाई और चौड़ाई को ध्यान में रखता है:
function showTooltip(e) {
var tooltip = e.target.classList.contains("tooltip")
? e.target
: e.target.querySelector(":scope .tooltip");
tooltip.style.left =
(e.pageX + tooltip.clientWidth + 10 < document.body.clientWidth)
? (e.pageX + 10 + "px")
: (document.body.clientWidth + 5 - tooltip.clientWidth + "px");
tooltip.style.top =
(e.pageY + tooltip.clientHeight + 10 < document.body.clientHeight)
? (e.pageY + 10 + "px")
: (document.body.clientHeight + 5 - tooltip.clientHeight + "px");
}
var tooltips = document.querySelectorAll('.couponcode');
for(var i = 0; i < tooltips.length; i++) {
tooltips[i].addEventListener('mousemove', showTooltip);
}.couponcode {
color: red;
cursor: pointer;
}
.couponcode:hover .tooltip {
display: block;
}
.tooltip {
position: absolute;
white-space: nowrap;
display: none;
background: #ffffcc;
border: 1px solid black;
padding: 5px;
z-index: 1000;
color: black;
}Lorem ipsum dolor sit amet, <span class="couponcode">consectetur
adipiscing<span class="tooltip">This is a tooltip</span></span>
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in <span
class="couponcode">reprehenderit<span class="tooltip">This is
another tooltip</span></span> in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est <span
class="couponcode">laborum<span class="tooltip">This is yet
another tooltip</span></span>.( यह फिडल भी देखें )
किसी भी एपीआई का उपयोग किए बिना आप शुद्ध सीएसएस और जेकरी डेमो का उपयोग करके भी ऐसा कुछ कर सकते हैं
एचटीएमएल
<div class="pointer_tooltip">
Click & Drag to draw the area
</div>सीएसएस
.pointer_tooltip{
width : auto;
height : auto;
padding : 10px;
border-radius : 5px;
background-color : #fff;
position: absolute;
}jQuery
$(document).mousemove(function( event ) {
var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
//set the actuall width
$('.pointer_tooltip').width($('.pointer_tooltip').width());
var position_top = event.pageY+18;
var position_left = event.pageX-60;
var width=$('body').width()-$('.pointer_tooltip').width();
//check if left not minus
if(position_left<0){
position_left=10;
}else if(position_left > width){
position_left=width-10;
}
$('.pointer_tooltip').css('top',position_top+'px');
$('.pointer_tooltip').css('left',position_left+'px');
});आप शुद्ध CSS का उपयोग करके टूलटिप बना सकते हैं। इस पर काम करें। इससे आपको अपनी समस्या को हल करने में मदद मिलेगी।
एचटीएमएल
<div class="tooltip"> Name
<span class="tooltiptext">Add your tooltip text here.</span>
</div>सीएसएस
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 270px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
} div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
text-align: center;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
//text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.toolLeft {
top: -5px;
right: 105%;
}
.toolRight {
top: -5px;
left: 105%;
}
.toolTop {
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.toolBottom {
top: 100%;
left: 50%;
margin-left: -60px;
} <div>
<div class="tooltip">Top <span class="tooltiptext toolTop">Tooltip text</span></div><br />
<div class="tooltip">Left <span class="tooltiptext toolLeft">Tooltip text</span></div><br />
<div class="tooltip">Right <span class="tooltiptext toolRight">Tooltip text</span></div><br />
<div class="tooltip">Bottom <span class="tooltiptext toolBottom">Tooltip text</span></div><br />
</div>आप इसे साधारण सीएसएस से jsfiddleकर सकते हैं ... यहां आप उदाहरण देख सकते हैं
टूलटिप के लिए सीएसएस कोड नीचे
[data-tooltip] {
position: relative;
z-index: 2;
cursor: pointer;
}
/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
pointer-events: none;
}
/* Position tooltip above the element */
[data-tooltip]:before {
position: absolute;
bottom: 150%;
left: 50%;
margin-bottom: 5px;
margin-left: -80px;
padding: 7px;
width: 160px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #000;
background-color: hsla(0, 0%, 20%, 0.9);
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
line-height: 1.2;
}
/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
position: absolute;
bottom: 150%;
left: 50%;
margin-left: -5px;
width: 0;
border-top: 5px solid #000;
border-top: 5px solid hsla(0, 0%, 20%, 0.9);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: " ";
font-size: 0;
line-height: 0;
}
/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}इस सवाल के बहुत सारे उत्तर हैं लेकिन फिर भी यह किसी की मदद करेगा। यह सभी बाएं, दाएं, ऊपर, नीचे के पदों के लिए है।
यहाँ सीएसएस है:
.m-tb-5 {
margin-top: 2px;
margin-bottom: 2px;
}
[data-tooltip] {
display: inline-block;
position: relative;
cursor: help;
padding: 3px;
}
/* Tooltip styling */
[data-tooltip]:before {
content: attr(data-tooltip);
display: none;
position: absolute;
background: #000;
color: #fff;
padding: 3px 6px;
font-size: 10px;
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="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;
}और HTML टैग इस तरह हो सकता है:
<p data-tooltip-position="right" data-tooltip="Some tooltip text here" title="">Text Here</p>
<p data-tooltip-position="left" data-tooltip="Some tooltip text here" title="">Text Here</p>
<p data-tooltip-position="top" data-tooltip="Some tooltip text here" title="">Text Here</p>
<p data-tooltip-position="bottom" data-tooltip="Some tooltip text here" title="">Text Here</p>
आप बूटस्ट्रैप टूलटिप्स आज़मा सकते हैं।
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})आप इसे टूलटिप के रूप में भी उपयोग कर सकते हैं ... यह समान काम करता है लेकिन आपको अतिरिक्त टैग लिखना होगा।
<abbr title="THis is tooltip"></abbr>और मेरा संस्करण
.tooltip{
display: inline;
position: relative; /** very important set to relative*/
}
.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title); /**extract the content from the title */
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}फिर एच.टी.एम.एल.
<div title="This is some information for our tooltip." class="tooltip">bar </div>अज़ले का अच्छा कार्यान्वयन है। मेरा लक्ष्य तत्व एक आइकन है, जिसमें क्लास का नाम "my_icon" है। एज़ल के add_tooltip फ़ंक्शनका उपयोग करते हुए बस तत्व को लक्षित करें:
az.add_tooltip('my_icon', 1, {
"this_class" : "my_tooltip",
"text" : "HELLO THERE!"
})
आप सामान्य CSS स्टाइल का उपयोग करके टूलटिप की स्थिति और स्टाइल को नियंत्रित कर सकते हैं । उपरोक्त टूलटिप को निम्नानुसार स्टाइल किया गया है:
az.style_tooltip('my_tooltip', 1, {
"background" : "black",
"margin-left" : "10px",
"color" : "hotpink",
"font-weight" : "bold",
"font-family" : "Arial",
"padding" : "10px",
"border-radius" : "10px"
})हम टूलटिप में "image_path" निर्दिष्ट करके एक छवि भी जोड़ सकते हैं :
az.add_tooltip('my_icon', 1, {
"this_class" : "my_tooltip",
"text" : "HELLO THERE!",
"image_path" : "https://cdn-images-1.medium.com/max/1874/1*toepgVwopga9TYFpSkSxXw.png",
"image_class" : "my_image"
})
चूँकि हमने ऊपर एक "image_class" निर्दिष्ट किया है, इसलिए हम इस बार एक ही style_tooltip फ़ंक्शन का उपयोग करके छवि को स्टाइल कर सकते हैं , इस बार छवि को लक्षित कर सकते हैं। ऊपर द्यूत छवि को निम्नानुसार स्टाइल किया गया था:
az.style_tooltip('my_image', 1, {
"width" : "50px",
"align" : "center"
})यहां एक बड़ी छवि का उपयोग करके एक उदाहरण दिया गया है :
... जोड़ा और स्टाइल इस प्रकार है:
az.add_tooltip('my_icon', 1, {
"this_class" : "my_tooltip",
"text" : "MORE INFO<br><br>",
"image_path" : "https://i0.wp.com/proactive.ie/wp-content/uploads/2017/11/Infographic.jpg?resize=1240%2C1062&ssl=1",
"image_class" : "my_image"
})
az.style_tooltip('my_image', 1, {
"width" : "500px"
})यहाँ पूरे कोड का GIST है।
आप इस FIDDLE में इधर-उधर खेल सकते हैं ।
एक div में टूलटिप जोड़ें
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover over me
<span class="tooltiptext">Information</span>
</div><div title="tooltip text..">
Your Text....
</div>अपने div एलिमेंट में टूलटिप जोड़ने का सबसे सरल तरीका।