Ben*_*Ben 51 css alignment tooltip
如何对齐工具提示的自然风格:鼠标指针的右下角？
~~~还有一些文本可以提交.~~~还有一些文本可以提交.~~~还有一些文本可以提交.~~~
<!DOCTYPE html>
<html>
<head>
<title>Tooltip with Image</title>
<meta charset="UTF-8">
<style type="text/css">
.tooltip {
text-decoration:none;
position:relative;
}
.tooltip span {
display:none;
}
.tooltip span img {
float:left;
}
.tooltip:hover span {
display:block;
position:absolute;
overflow:hidden;
}
</style>
</head>
<body>
<a class="tooltip" href="http://www.google.com/">
Google
<span>
<img alt="" src="http://www.google.com/images/srpr/logo4w.png">
</span>
</a>
</body>
</html>
Dan*_*mms 87
对于默认的工具提示行为,只需添加title属性即可.但这不能包含图像.
<div title="regular tooltip">Hover me</div>
在你澄清问题之前我用纯JavaScript做了这个,希望你发现它很有用.图像将弹出并跟随鼠标.
JavaScript的
var tooltipSpan = document.getElementById('tooltip-span');
window.onmousemove = function (e) {
var x = e.clientX,
y = e.clientY;
tooltipSpan.style.top = (y + 20) + 'px';
tooltipSpan.style.left = (x + 20) + 'px';
};
CSS
.tooltip span {
display:none;
}
.tooltip:hover span {
display:block;
position:fixed;
overflow:hidden;
}
多个元素的一个解决方案是更新所有工具提示span并在鼠标移动时将它们设置在光标下.
var tooltips = document.querySelectorAll('.tooltip span');
window.onmousemove = function (e) {
var x = (e.clientX + 20) + 'px',
y = (e.clientY + 20) + 'px';
for (var i = 0; i < tooltips.length; i++) {
tooltips[i].style.top = y;
tooltips[i].style.left = x;
}
};
Ant*_*gan 10
在没有JS的情况下执行此操作的一种方法是使用悬停操作来显示隐藏的HTML元素,请参阅此codepen:
http://codepen.io/c0un7z3r0/pen/LZWXEw
请注意,包含工具提示内容的范围与父li相关.神奇之处在于:
ul#list_of_thrones li > span{
display:none;
}
ul#list_of_thrones li:hover > span{
position: absolute;
display:block;
...
}
正如您所看到的,跨度是隐藏的,除非listitem悬停在上面,因此显示span元素,span可以包含您需要的html.在附加的codepen中,我还使用了一个:after元素作为箭头但当然是完全可选的,并且仅出于美观目的而包含在此示例中.
我希望这有帮助,我觉得有必要发布所有其他答案包括JS解决方案,但OP要求只有HTML/CSS解决方案.
小智 7
您可以使用jQuery UI插件,以下是参考URL
相对于鼠标指针,将工具提示位置的轨迹设置为TRUE,例如.
$('.tooltip').tooltip({ track: true });我更喜欢这种技巧:
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>.(另见小提琴)