У меня есть только подсказка CSS, которая загружает span как всплывающую подсказку при hover ссылки. Однако это позиционируется с помощью CSS, но если ссылка находится рядом с верхней частью страницы или стороны, то всплывающая подсказка уходит со стороны/верхней части страницы.
Есть ли способ css сделать это изменение или мне придется полагаться на JS? Я начал пытаться поместить что-то вместе с jQuery, но скорее использовал бы CSS, если это было возможно.
JS скрипта на 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="">Nicholass</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>