我有一个这样的div标签:
<div>
<label>Name</label>
<input type="text"/>
</div>
我如何显示一个工具提示:div的悬停,最好有一个淡入/淡出效果。
我有一个这样的div标签:
<div>
<label>Name</label>
<input type="text"/>
</div>
我如何显示一个工具提示:div的悬停,最好有一个淡入/淡出效果。
当前回答
不使用任何API 你也可以通过使用纯CSS和Jquery演示来做这样的事情
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');
});
其他回答
我为它创造了一个公式。 首先是html
<div class="tooltip-container">
<button class="tooltip-tarjet">
My Button
</button>
<div class="tooltip-element">
This is my tooltip content right here...
</div>
</div>
现在是它的css
.tooltip-container {
/* it contains the tooltip message and the one firing the tooltip
* it has position relative since it allows for a better responsive positioning
* of the tooltip-element */
display: inline-block;
position: relative;
flex-direction: row;
}
.tooltip-tarjet:hover + .tooltip-element {
/* this selector rule matches the tooltip-element right after
* tooltip-tarjet at a hover action
* */
display: inline-block;
position: absolute;
background-color: #869096;
color: white;
opacity: 1;
transition: all 1s;
}
.tooltip-element {
/* here goes the tooltip-element styles and positioning, now your
* tooltip element will always remain to your desired positionno matter
* the screen size at hand
* */
display: none;
opacity: 0;
text-align: center;
padding: 7px;
z-index: 10;
width: 200px;
left: -60px;
bottom: 48px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
font-size: 12px;
line-height: 1.5;
}
我的版本是
.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;
}
然后是HTML
<div title="This is some information for our tooltip." class="tooltip">bar </div>
对于基本的工具提示,您需要:
<div title="This is my tooltip">
如:
.visible { 高度:3他们; 宽度:10 em; 背景:黄色; } <div title="This is my tooltip" class="visible"></div> .
对于一个更花哨的javascript版本,你可以查看:
https://jqueryhouse.com/best-jquery-tooltip-plugins/
上面的链接提供了25个工具提示选项。
你可以用title。它几乎适用于所有事情
<div title="非常适合通过合作结交新朋友。">
<input script=JavaScript type=button title="Click for a compliment" onclick="窗口。alert(“你的头发让我想起了草原上的日落”)”value=“让你快乐”>
<table title="为理解我感受的人工作真是太棒了">
只要想到任何可以在HTML窗口中可见的标签,并在标签中插入title=“whatever tooltip you'd like”,你就得到了一个工具提示。
试试这个。你可以这样做,只有css和我只添加了数据标题属性的工具提示。
.tooltip { 位置:相对; 显示:inline-block; } .tooltip [data-title]:徘徊:{后 内容:attr (data-title); 填充:4px 8px; 颜色:# fff; 位置:绝对的; 左:0; 上图:110%; 空白:nowrap;} border - radius: 5 px; 背景:# 000; } <div data-title="My tooltip" class="tooltip"> < >标签名称> < /标签 < input type = " text " / > < / div >