jquery - problemas - no veo el puntero en lol
Solo cierre la información sobre herramientas si el mouse no está sobre el objetivo o información sobre herramientas (4)
Esta es la solución que surgió después de muchas búsquedas y pruebas: http://jsfiddle.net/Handyman/fNjFF/11/
$(''#target'').tooltip({
items: ''a.target'',
content: ''Loading…'',
show: null, // show immediately
open: function(event, ui)
{
if (typeof(event.originalEvent) === ''undefined'')
{
return false;
}
var $id = $(ui.tooltip).attr(''id'');
// close any lingering tooltips
$(''div.ui-tooltip'').not(''#'' + $id).remove();
// ajax function to pull in data and add it to the tooltip goes here
},
close: function(event, ui)
{
ui.tooltip.hover(function()
{
$(this).stop(true).fadeTo(400, 1);
},
function()
{
$(this).fadeOut(''400'', function()
{
$(this).remove();
});
});
}
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<div id="target">
<a href="#" class="target">Hover over me!</a>
<a href="#" class="target">Hover over me too!</a>
</div>
</body>
También tenía un problema con la información de herramientas persistente cuando había una gran cantidad de enlaces de información sobre herramientas muy cerca, por lo que la información sobre herramientas terminaría apilando o cerrándose, por lo que cierra todas las demás sugerencias abiertas cuando se abre una información sobre herramientas.
Utilizando la información sobre herramientas de jQuery UI, me gustaría mantener la información sobre herramientas abierta si estoy por encima del objetivo, o si estoy por encima de la información sobre herramientas.
Estoy pensando que puedo usar la devolución de llamada cercana para ver si estoy sobre una sugerencia de herramienta o un área de destino, aunque tendría que asignar otra función de mouseout.
Aquí está mi jsfiddle: http://jsfiddle.net/Handyman/fNjFF/
$(function()
{
$(''#target'').tooltip({
items: ''a.target'',
content: ''just some text to browse around in''
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="target">
<a href="#" class="target">Hover over me!</a>
<a href="#" class="target">Hover over me too!</a>
</div>
Estoy trabajando en ello ahora para ver qué puedo hacer.
Esta es una solución simple para elementos div:
$(function() {
$("#mydiv").tooltip({
effect: ''slide'',
content: ''loading...'',
open: function (event, ui) {
$(ui.tooltip).appendTo(this);
}
});
});
No está integrado, ya que el equipo de jQuery UI no pensó que agregaría valor. Puede leer la solicitud de funciones here . Hay algunos enlaces a proyectos como este ( demo ) que agregan el efecto que estás buscando.
Puedes hacer esto con ese complemento mínimo:
$(''[title|=ptooltip]'').pTooltip();
O puede buscar en qTip u otros complementos más robustos.
Tenía el objetivo similar de tener una información sobre herramientas de arranque con un enlace HTML abierto hasta hacer clic en otro lugar o abrir otra información sobre herramientas (para que el usuario pueda hacer clic en el enlace en la información sobre herramientas).
Aquí está mi solución basada en algunas publicaciones anteriores:
/**
* For tooltips with links, don''t remove hover until click somewhere else or open another tooltip
*/
$(function() {
// Show tooltip with html link
$(''#tip'').on("mouseover", function() {
$(''#tip'').tooltip(''show'');
});
// If open any other tooltip, close the one with the link.
$(''[rel="tooltip"]'').not(''#tip'').on("mouseover", function() {
$(''#tip'').tooltip(''hide'');
});
// If click any where hide tooltip with link
$(document).click(function() {
$(''#tip'').tooltip(''hide'');
});
});
El HTML para se ve así. La clave es tener el disparador de datos establecido en "" para la sugerencia con el HTML.
<span id="tip" data-trigger="" rel="tooltip" data-html="true" title="This is the <a href= " https://www.google.com " target=‘_blank’ rel=‘noopener’>tip</a>."> Linked ToolTip </span>