javascript - attribute - title html

Evitar que la información sobre CSS salga de la página/ventana (5)

Desafortunadamente, si desea mantener un buen posicionamiento de la información sobre herramientas, no es posible usar solo CSS.

Soluciones de script

Pero, como ya estás usando un script, te sugiero esta solución:

Use position: absolute para posicionar el .ktooltiptext acuerdo a .ref ,
Utilice el método .getBoundingClientRect() para obtener fácilmente la posición y el tamaño de la información sobre herramientas,
Aplicar alguna corrección si fuera de la window ,
También hizo algunas modificaciones en CSS.

Fragmento con solo JavaScript nativo (evitando jQuery, el documento será más ligero).

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; }

My hope is in a bishop,  <a href="#edtxt-explnote1" id="reference-to-edtxt-explnote1" class="ktooltip">1</a>  According to tradition Nicholas was bishop of Myra in Lycia (south-west Turkey today). and in almighty God and his never-ending miracles. Generous Saint Nicholas holds an office, there is a gold symbol in his sign.  <a href="#edtxt-explnote2" id="reference-to-edtxt-explnote2" class="ktooltip">20</a>  One of Nicholas’s symbols was three bags of gold which were the dowry he provided for three girls

Fragmento con 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 }); });

Con cualquiera de los fragmentos anteriores, puedes jugar con tu ventana para ver que la ventana emergente no saldrá a la derecha. No debería salir en la parte superior también.

⋅ ⋅ ⋅

Una sugerencia de CSS solamente

Ahora, si no te importa mucho el posicionamiento de tu información sobre herramientas, puedes usar esta solución donde no cambié ninguno de tus HTML:

position: relative; uso position: relative; en los elementos span para usarlo como referencia,
Use position: absolute en el .ktooltiptext ,
Use la top e left para colocar el .ktooltiptext como desee.

Usando esa solución, la información sobre herramientas mantendrá su estilo, pero se alineará a la izquierda, debajo del elemento span , por lo que la información sobre herramientas nunca debe salir a la derecha o en la parte superior.

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; }

Tengo una información sobre herramientas solo para CSS que carga un span como información sobre herramientas cuando pasas el enlace. Sin embargo, esto se coloca con CSS, pero si el enlace está cerca de la parte superior de una página o de un lado, la información sobre herramientas se sale del lado / de la parte superior de la página.

¿Hay alguna forma con css para hacer este cambio o tendré que confiar en JS? Comencé a intentar juntar algo con jQuery, pero preferiría usar CSS si es posible.

El violín de JS en https://jsfiddle.net/gtoprh21/12/

Retazo:

$( ".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; }

Opción 1) Usando el atributo global del title

título: especifica información adicional sobre un elemento (que se muestra como información sobre herramientas)
Documentos: el atributo global de título El uso del atributo de título es altamente problemático para:
Personas que utilizan dispositivos táctiles.
Personas navegando con teclados.
Personas que navegan con la ayuda de tecnología de asistencia como lectores de pantalla o lupas
Personas que experimentan alteraciones en el control motor fino.
Personas con inquietudes cognitivas. Esto se debe principalmente a la compatibilidad inconsistente del navegador, agravada por la complicación adicional introducida por el análisis de la tecnología de asistencia de la página representada por el navegador.

span {border-bottom: 1px dashed pink}

 Mouse over this paragraph, to display the title attribute as a tooltip. 

Opción 2) Si el texto y el texto de la información sobre herramientas tienen un tamaño fijo: se pueden usar 4 clases css para colocar la información sobre herramientas que hace referencia al elemento disparador. Algo como:

.tooltip-top {top: -3em} .tooltip-bottom {top: 0} .tooltip-left {left: -3em} .tooltip-right {right: 0}

Puedes probar esto solo con CSS y sin JS. No es el tipo de información sobre herramientas más elegante, pero nunca te fallará y nunca te rendirá :)

.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; }

My hope is in a bishop,  <div style="display:inline-block"> <a href="#edtxt-explnote1" id="reference-to-edtxt-explnote1" class="ktooltip">1</a> According to tradition Nicholas was bishop of Myra in Lycia (south-west Turkey today). </div> and in almighty God and his never-ending miracles. Generous Saint Nicholas holds an office, there is a gold symbol in his sign.  <a href="#edtxt-explnote2" id="reference-to-edtxt-explnote2" class="ktooltip">2</a> One of Nicholas’s symbols was three bags of gold which were the dowry he provided for three girls

https://jsfiddle.net/gtoprh21/72/

aunque todo tiene que ser recodificado pero se puede lograr con algo como esto:

$(".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 }); })

solo copia este css y reemplázalo con tu clase

.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; }