J'ai une info-bulle CSS uniquement qui charge span
comme info-bulle lorsque vous hover
le lien. Cependant, cela est positionné avec CSS, mais si le lien est proche du haut d'une page ou d'un côté, l'info-bulle disparaît du côté/haut de la page.
Est-il possible avec CSS de faire ce changement ou devrais-je compter sur JS? J'ai commencé à essayer d'assembler quelque chose avec jQuery mais préférerais utiliser CSS si possible.
JS fiddle at https://jsfiddle.net/gtoprh21/12/
Fragment:
$( ".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>
Malheureusement, si vous souhaitez conserver le bon positionnement de votre info-bulle, l'utilisation de CSS n'est pas possible.
Solutions de script
Mais, comme vous utilisez déjà un script, je vous suggère cette solution:
position: absolute
Pour positionner le .ktooltiptext
En conséquence sur .ref
,.getBoundingClientRect()
pour obtenir facilement la position et la taille de l'info-bulle,window
,Extrait avec uniquement du JavaScript natif (en évitant jQuery, le document sera plus clair.)
var ktooltips = document.querySelectorAll(".ktooltip");
ktooltips.forEach(function(ktooltip, index){ // For each ktooltip
ktooltip.addEventListener("mouseover", position_tooltip); // On hover, launch the function below
})
function position_tooltip(){
// Get .ktooltiptext sibling
var tooltip = this.parentNode.querySelector(".ktooltiptext");
// Get calculated ktooltip coordinates and size
var ktooltip_rect = this.getBoundingClientRect();
var tipX = ktooltip_rect.width + 5; // 5px on the right of the ktooltip
var tipY = -40; // 40px on the top of the ktooltip
// Position tooltip
tooltip.style.top = tipY + 'px';
tooltip.style.left = tipX + 'px';
// Get calculated tooltip coordinates and size
var tooltip_rect = tooltip.getBoundingClientRect();
// Corrections if out of window
if ((tooltip_rect.x + tooltip_rect.width) > window.innerWidth) // Out on the right
tipX = -tooltip_rect.width - 5; // Simulate a "right: tipX" position
if (tooltip_rect.y < 0) // Out on the top
tipY = tipY - tooltip_rect.y; // Align on the top
// Apply corrected position
tooltip.style.top = tipY + 'px';
tooltip.style.left = tipX + 'px';
}
.ref,
.refs {
position: relative;
}
.ktooltip {
display: inline-block;
text-indent: 0em;
}
.ref .ktooltiptext,
.refs .ktooltiptext {
visibility: hidden;
width: 200px;
background: #fff;
border-radius: 6px;
padding: 5px; /* TAKIT: Changed here */
top: -999px; /* TAKIT: Changed here */
left: -999px; /* TAKIT: Changed here */
border: 2px solid grey;
line-height: normal;
position: absolute; /* TAKIT: Changed here */
z-index: 1;
}
.ref:hover .ktooltiptext,
.refs:hover .ktooltiptext {
visibility: visible;
}
<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>
<!-- the 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.
<!-- link to ref -->
<sup class="ref expl">
<a href="#edtxt-explnote2" id="reference-to-edtxt-explnote2" class="ktooltip">20</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>
Extrait avec jQuery
$(".ktooltip").mouseover(function(e) {
var tooltip = $(this).siblings('.ktooltiptext'); // Get tooltip element (ktooltiptext)
var tipX = $(this).outerWidth() + 5; // 5px on the right of the ktooltip
var tipY = -40; // 40px on the top of the ktooltip
tooltip.css({ top: tipY, left: tipX }); // Position tooltip
// Get calculated tooltip coordinates and size
var tooltip_rect = tooltip[0].getBoundingClientRect();
// Corrections if out of window
if ((tooltip_rect.x + tooltip_rect.width) > $(window).width()) // Out on the right
tipX = -tooltip_rect.width - 5; // Simulate a "right: tipX" position
if (tooltip_rect.y < 0) // Out on the top
tipY = tipY - tooltip_rect.y; // Align on the top
// Apply corrected position
tooltip.css({ top: tipY, left: tipX });
});
.ref,
.refs {
position: relative;
}
.ktooltip {
display: inline-block;
text-indent: 0em;
}
.ref .ktooltiptext,
.refs .ktooltiptext {
visibility: hidden;
width: 200px;
background: #fff;
border-radius: 6px;
padding: 5px; /* TAKIT: Changed here */
top: -999px; /* TAKIT: Changed here */
left: -999px; /* TAKIT: Changed here */
border: 2px solid grey;
line-height: normal;
position: absolute; /* TAKIT: Changed here */
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>
<!-- the 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.
<!-- link to ref -->
<sup class="ref expl">
<a href="#edtxt-explnote2" id="reference-to-edtxt-explnote2" class="ktooltip">20</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>
Avec l'un des extraits ci-dessus, vous pouvez jouer avec votre fenêtre pour voir que la fenêtre contextuelle ne sortira pas à droite! Cela ne devrait pas aller au sommet aussi.
⋅ ⋅
suggestion CSS seulement
Maintenant, si vous ne vous souciez pas beaucoup du positionnement de votre info-bulle, vous pouvez utiliser cette solution sans avoir modifié votre code HTML:
position: relative;
Sur les éléments span
pour l’utiliser comme référence,position: absolute
Sur le .ktooltiptext
,top
et left
pour positionner le .ktooltiptext
À votre guise.En utilisant cette solution, l’info-bulle conservera son style, mais elle serait alignée à gauche, sous l’élément span
, elle ne devrait donc jamais s’afficher à droite ou en haut.
p span { /* TAKIT: Changed here */
position: relative;
}
.ktooltip {
display: inline-block;
text-indent: 0em;
}
.ref .ktooltiptext,
.refs .ktooltiptext {
visibility: hidden;
width: 200px;
background: #fff;
border-radius: 6px;
padding: 5px; /* TAKIT: Simplified here */
border: 2px solid grey;
line-height: normal;
position: absolute; /* TAKIT: Changed */
top: 20px; /* TAKIT: Changed */
left: 0; /* TAKIT: Added to always align tooltip on the left of the span */
z-index: 1;
}
.ref:hover .ktooltiptext,
.refs:hover .ktooltiptext {
visibility: visible;
}
<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>
<!-- the 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.
<!-- link to ref -->
<sup class="ref expl">
<a href="#edtxt-explnote2" id="reference-to-edtxt-explnote2" class="ktooltip">20</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>
Vous pouvez essayer cela avec seulement CSS et pas de JS du tout. Ce n’est pas le type d’info-bulle le plus élégant, mais il ne vous fera jamais défaut et ne vous laissera jamais tomber :)
.ktooltip {
display: inline-block;
text-indent:0em;
}
.ktooltiptext, .ktooltiptext {
display: none;
width: calc(100vw - 35px);
background: #fff;
border-radius: 6px;
padding: 5px 5px;
left: 10px;
border: 2px solid grey;
line-height: normal;
text-decoration: none;
position: absolute;
z-index: 1;
}
p {display:inline-block}
.ktooltip:hover + span {
display: block;
}
<p>
<span id="edtxt.trans1" class="tei l">My hope is in a bishop,
<!--link to a reference -->
<div style="display:inline-block">
<a href="#edtxt-explnote1" id="reference-to-edtxt-explnote1" class="ktooltip">1</a>
<span class="ktooltiptext">According to tradition <span style="name">Nicholas</span> was bishop of Myra in Lycia (south-west Turkey today).</span>
</div>
</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 -->
<a href="#edtxt-explnote2" id="reference-to-edtxt-explnote2" class="ktooltip">2</a>
<span class="ktooltiptext" onclick="return false;"> 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>
</span><br>
</p>
bien que le tout doive être recodé, mais vous pouvez y parvenir avec quelque chose comme ceci:
$(".ktooltip").on('mouseover', function(e) {
var tooltip = $('.ktooltiptext'),
wt = $(window).scrollTop(), //window top pos
ww = $(window).outerWidth(), //window width
tt = tooltip.offset().top, //Tooltip top pos
tl = tooltip.offset().left, //Tooltip left pos
tw = tooltip.outerWidth(); //Tooltip Width
tooltip.css({ 'left': '10px', 'right': 'auto', 'top': '-40px' });
if(tt < wt) tooltip.css('top', 0);
if((tl + tw) > ww) tooltip.css({ 'left': 'auto', 'right': 0 });
})
il suffit de copier ce css nd remplacer avec votre classe
.ref .ktooltiptext, .refs .ktooltiptext
.ref .ktooltiptext, .refs .ktooltiptext {
visibility:hidden;
width: 200px;
background: #fff;
border-radius: 6px;
padding: 5px 5px;
top: -15px;
left: 10px;
border:2px solid grey;
line-height: normal;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
Option 1) Utilisation de l'attribut global title
title - Spécifie des informations supplémentaires sur un élément (affiché sous forme d'info-bulle)
Docs: L'attribut global title L'utilisation de l'attribut title est très problématique pour:
- Personnes utilisant des appareils tactiles
- Personnes naviguant avec des claviers
- Personnes naviguant à l'aide de technologies d'assistance telles que des lecteurs d'écran ou des loupes
- Personnes souffrant de troubles de la motricité fine
- Personnes ayant des problèmes cognitifs. Ceci est principalement dû à la prise en charge incohérente du navigateur, aggravée par la complication supplémentaire introduite par l'analyse par la technologie d'assistance de la page rendue par le navigateur.
span {border-bottom: 1px dashed pink}
<span title="According to tradition Nicholas was bishop of Myra in Lycia (south-west Turkey today).">
Mouse over this paragraph, to display the title attribute as a tooltip.
</span>
Option 2) Si le texte et le texte de l'info-bulle sont de taille fixe: vous pouvez utiliser 4 classes CSS pour placer l'info-bulle référençant l'élément déclencheur. Quelque chose comme:
.tooltip-top {top: -3em}
.tooltip-bottom {top: 0}
.tooltip-left {left: -3em}
.tooltip-right {right: 0}