我有一个仅 CSS 的工具提示，它加载span作为工具提示，当您hover链接。然而，这是使用 CSS 定位的，但如果链接靠近页面顶部或侧面，则工具提示会离开页面的侧面/顶部。
有没有办法使用 css 来进行此更改，或者我必须依赖 JS？
我已经开始尝试将一些东西与 jQuery 结合在一起，但如果可能的话宁愿使用 CSS。
JS 摆弄https://jsfiddle.net/gtoprh21/12/ https://jsfiddle.net/gtoprh21/12/
Snippet:
$( ".ktooltip" )
.mouseover(function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
if((mousey+100)>$(window).height())
{
$('.tooltip')
.css({ top: mousey-100 ,left: mousex })
}
else if((mousex+200)>$(window).width())
{
$('.tooltip')
.css({ top: mousey ,left: mousex-200})
}
else
{
$('.tooltip')
.css({ top: mousey, left: mousex })
}
})
.ref, .refs {
position:relative;
}
/*added a text indent to overide indent styles further down*/
.ktooltip {
display: inline-block;
text-indent:0em;
}
.ref .ktooltiptext, .refs .ktooltiptext {
visibility:hidden;
width: 200px;
background: #fff;
border-radius: 6px;
padding: 5px 5px;
top: -40px;
left: 10px;
border:2px solid grey;
line-height: normal;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.ref:hover .ktooltiptext, .refs:hover .ktooltiptext {
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
<span id="edtxt.trans1" class="tei l">My hope is in a bishop,
<!--link to a reference -->
<sup class="ref expl">
<a href="#edtxt-explnote1" id="reference-to-edtxt-explnote1" class="ktooltip">1</a>
<!-- lhe reference in a tooltip -->
<span class="ktooltiptext">According to tradition <span style="name">Nicholas</span> was bishop of Myra in Lycia (south-west Turkey today).</span>
</sup>
</span><br>
<span id="trans2" class="tei l">and in almighty God and his never-ending miracles.</span><br>
<span id="trans3" class="tei l">Generous Saint Nicholas holds an office,</span><br>
<span id="trans4" class="tei l">there is a gold symbol in his sign.
<!-- likn to ref -->
<sup class="ref expl">
<a href="#edtxt-explnote2" id="reference-to-edtxt-explnote2" class="ktooltip">2</a>
<!-- the tooltip -->
<span class="ktooltiptext"> One of <span style="">Nicholas’s</span> symbols was three <sup>bags</sup> of gold <span style="font-variant: small-caps;">which</span> were the <span style="color: red;">dowry</span> he provided <span style="color: blue;">for</span> three <span style="color: green;">girls</span>
</span>
</sup>
</span><br>
</p>
不幸的是，如果您想让工具提示保持良好的定位，仅使用 CSS 是不可能的。
脚本解决方案
但是，由于您已经在使用一些脚本，我建议您使用以下解决方案：
- Use
position: absolute定位.ktooltiptext据此.ref,
- Use the
.getBoundingClientRect()方法轻松获取工具提示的位置和大小，
- 如果超出范围，请进行一些修正
window,
- 对CSS也做了一些修改。
仅包含本机 JavaScript 的代码片段（避免使用 jQuery，文档会更轻。）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
