use*_*685 530 html javascript css tooltip
我有一个div标签如下:
<div>
<label>Name</label>
<input type="text"/>
</div>
现在我想要一个简单的javascript来显示工具提示:悬停div.有人可以帮帮我吗？工具提示还应具有淡入/淡出效果.
ssc*_*rus 849
对于基本工具提示,您需要:
<div title="This is my tooltip">
对于更好的javascript版本,您可以查看:
https://jqueryhouse.com/best-jquery-tooltip-plugins/
上面的链接为您提供了25个工具提示选项.
[原始链接,现在已经过时了:http://www.designer-daily.com/jquery-prototype-mootool-tooltips-12632]
And*_*ios 272
这是可以做到与CSS只,没有JavaScript的根本:运行演示
应用自定义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的javascript后备(如果需要).
注意2:增强可能是添加一些javascript来计算鼠标位置并通过更改应用于它的类将其添加到伪元素.
cdh*_*wie 78
你根本不需要JavaScript; 只需设置title属性:
<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>
请注意,工具提示的可视化表示取决于浏览器/操作系统,因此可能会淡入,但可能不会.但是,这是执行工具提示的语义方式,它可以与屏幕阅读器等辅助功能软件一起正常工作.
看到:
<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>Nat*_*han 17
这是一个不错的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后,它将回退到默认的浏览器/操作系统工具提示.
Nar*_*ian 16
我做了一些应该能够适应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;}
有关更深入的讨论,请参阅我的帖子:
Ste*_*inn 14
这是一个纯CSS 3实现(带有可选的JS)
您唯一需要做的就是在任何名为"data-tooltip"的div上设置一个属性,当您将鼠标悬停在它旁边时,该文本将显示在它旁边.
我已经包含了一些可选的JavaScript,它会导致工具提示显示在光标附近.如果您不需要此功能,则可以放心地忽略此小提琴的JavaScript部分.
如果您不想在悬停状态下淡入,只需删除过渡属性.
它的风格类似于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 }'
}
Ans*_*shi 12
好的,这是您满足的所有赏金要求:
以下是我在这个纯粹的JS,CSS和HTML5小提琴中加入的功能:
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);
我开发了三种类型的淡入淡出效果：
/* 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>
小智 5
您可以使用数据属性、伪元素等创建自定义 CSS 工具提示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;
}
您可以在切换孩子的divonmouseover和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")
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"), "I'm a tooltip")#mydiv {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 50px;
padding: 5px 10px;
background-color: #e2f7ff;
box-shadow: 1px 1px 1px 0px #cecece;
}
.tooltip {
position: absolute;
display: inline-block;
white-space: nowrap;
width: auto;
height: auto;
background-color: #11121b;
color: white;
padding: 4px 6px;
border-radius: 3px;
z-index: 99;
left: 100%;
top: 0;
}<div id="mydiv"> This is just a 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"的标签，然后在它的标签内插入一个标签，你就会得到一个工具提示。
小智 5
您也可以使用它作为工具提示...它的工作原理相同，但您必须编写额外的标签，就是这样。
<abbr title="THis is tooltip"></abbr>
| 归档时间： |
|
| 查看次数： |
647100 次 |
| 最近记录： |