如何添加一个工具提示到一个div
我有一个div标签，如下所示：
<html> <head></head> <body> <div> <label>Name</label> <input type="text"/> </div> </body> </html> 现在我想要一个简单的JavaScript来显示工具提示：hover分区。 有人可以帮我吗？ 工具提示还应该具有淡入/淡出效果。
对于基本的工具提示，你需要：
<div title="This is my tooltip">
对于一个fancier的javascript版本，你可以看看：
http://www.designer-daily.com/jquery-prototype-mootool-tooltips-12632
上面的链接为您提供了12个工具提示选项。
它可以用CSS来完成，根本不需要JavaScript： 运行演示
-
应用自定义HTML属性，例如。
tooltip="bla bla"到你的对象（div或者其他）：<div tooltip="bla bla"> something here </div> -
定义
:before每个[tooltip]对象的伪元素都是透明的，绝对定位的，并且以tooltip=""值作为内容：[tooltip]:before { position : absolute; content : attr(tooltip); opacity : 0; } -
定义
:hover:beforehover每个[tooltip]状态，使其可见：[tooltip]:hover:before { opacity : 1; } -
将您的样式（颜色，大小，位置等）应用到工具提示对象; 故事结局。
在演示中，我已经定义了另一个规则来指定如果工具提示hover在父项之外但是在父项之外时，它必须消失，还有另一个自定义属性tooltip-persistent和一个简单的规则：
[tooltip]:not([tooltip-persistent]):before { pointer-events: none; }
注1：浏览器覆盖范围很广，但考虑使用旧的IE浏览器的回退（如果需要）。
注2：一个增强可能会添加一些JavaScript来计算鼠标位置，并将其添加到伪元素，通过改变应用到他的类。
你根本不需要JavaScript; 只需设置title属性：
<html><head></head> <body> <div title="Hello, World!"> <label>Name</label> <input type="text"/> </div> </body> </html>
请注意，工具提示的视觉呈现是依赖于浏览器/操作系统，因此它可能会淡入，它可能不会。 但是，这是做工具提示的语义方式，它可以正常使用屏幕阅读器等辅助function软件。
看到这个jsfiddle 。
我做了一些应该可以适应div的东西。
HTML
<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>
CSS
.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;}
有关更深入的讨论，请参阅我的post：
hover的简单格式化工具提示文本
这里有一个不错的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属性即可。 无论标题属性中的文本是在工具提示中。
注意：禁用JavaScript时，将回退到默认的浏览器/操作系统工具提示。
这是一个纯粹的CSS 3实现（使用可选的JS）
你唯一需要做的就是在任何一个名为“data-tooltip”的div上设置一个属性，当你将鼠标hover在它上面时，文本将显示在它旁边。
我已经包含了一些可选的JavaScript，可以使工具提示显示在光标附近。 如果你不需要这个function，你可以放心地忽略这个小提琴的JavaScript部分。
如果您不希望在hover状态下淡入，只需删除转场属性即可 。
它的风格就像title属性工具提示。 这里是JSFiddle： http : //jsfiddle.net/toe0hcyn/1/
HTML例子：
<div data-tooltip="your tooltip message"></div>
CSS：
*[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; }
基于鼠标位置的工具提示位置更改的可选JavaScript：
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 }' }
好的，这是你所有的赏金要求：
- 没有jQuery
- 即时出现
- 没有消失，直到老鼠离开该地区
- 淡入/淡出效果
- 最后..简单的解决scheme
这是一个演示和链接到我的代码（JSFiddle）
下面是我已经融入到这个纯粹的JS，CSS和HTML5小提琴的function：
- 您可以设置淡入淡出的速度。
- 你可以用简单的variables设置工具提示的文本。
HTML：
<div id="wrapper"> <div id="a">Hover over this div to see a cool tool tip!</div> </div>
CSS：
#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; }
JavaScript的：
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);
那么这个怎么样，遗憾的代码是不是优化，因为我匆忙，但我想你会得到这个想法：
http://jsfiddle.net/prollygeek/1b0Lrr8d/
//Auxiliary functions function createToolTip(divName,tips) { document.getElementById(divName).innerHTML+='<div class="tooltip">'+tips+'</div>' } function removeToolTip(divName) { document.getElementById(divName).removeChild( document.getElementById(divName).getElementsByClassName("tooltip")[0]) } function Tooltip(divName,tips) { document.getElementById(divName).onmouseover=function(){createToolTip(divName,tips)} document.getElementById(divName).onmouseout=function(){removeToolTip(divName)} } //Sample Usage Tooltip("mydiv","hello im a tip div")
最简单的方法是在容器中的工具提示元素上设置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>
<!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
您可以使用数据属性，伪元素和content: attr()创build自定义CSS工具提示content: attr() eg。
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; }
一个CSS3的解决scheme可能是：
CSS3：
div[id^="tooltip"]:after {content: attr(data-title); background: #e5e5e5; position: absolute; top: -10px; left: 0; right: 0; z-index: 1000;}
HTML5：
<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>
然后你可以用同样的方法创build一个tooltip-2 div …你当然也可以使用title属性而不是data属性。
不使用任何API您也可以使用纯CSS和Jquery Demo来做类似的事情
HTML
<div class="pointer_tooltip"> Click & Drag to draw the area </div>
CSS
.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'); });
你可以使用标题。 它会适用于一切
<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"里面的标签，你得到了自己的工具提示。
你可以使用纯CSS的工具提示。试试这个。希望它能帮助你解决你的问题。
HTML
<div class="tooltip"> Name <span class="tooltiptext">Add your tooltip text here.</span> </div>
CSS
.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; }
这个问题有很多答案，但仍然可能会帮助某人。 这是所有的左，右，上，下位置。
这是CSS：
.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>
工具提示定位纯CSS
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>
