【发布时间】：2018-07-11 15:33:08
【问题描述】：
我有一个纯 CSS 工具提示，当您 hover 链接时，它会加载 span 作为工具提示。然而，这是使用 CSS 定位的，但如果链接靠近页面顶部或侧面，则工具提示会离开页面的侧面/顶部。
有没有办法用 css 来做这个改变，还是我必须依赖 JS？ 我已经开始尝试将一些东西与 jQuery 放在一起，但如果可能的话，我宁愿使用 CSS。
https://jsfiddle.net/gtoprh21/12/ 的 JS 小提琴
片段：
$( ".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>【问题讨论】：
-
坏消息，不可能。
-
span 元素的文本和工具提示文本是否已修复？如果是这样，您可以根据引用的元素（跨度）和它自己的大小来定位每个工具提示以适应窗口。否则无法使用 CSS。
-
您是否考虑过创建额外的工具提示类 - 例如工具提示顶部、工具提示底部并按情况使用它们？
-
只是为了让您知道我已经用仅 JavaScript 的解决方案更新了我的答案；避免使用 jQuery，文档会更轻。 ⋅⋅⋅ 我看到你真的想要一个纯 CSS 的解决方案，我还添加了一个纯 CSS suggestion 而不修改任何 HTML。
标签： javascript jquery css tooltip