javascript - custom - tooltip jquery ui ejemplos
jQuery Popup Bubble/Tooltip (13)
Intento crear una "burbuja" que pueda aparecer cuando se onmouseover evento onmouseover y permanecerá abierta mientras el mouse esté sobre el elemento que arrojó el evento onmouseover O si el mouse se mueve a la burbuja. Mi burbuja tendrá que tener todas las formas de HTML y estilo, incluidos hipervínculos, imágenes, etc.
Básicamente lo he logrado escribiendo alrededor de 200 líneas de JavaScript feo, pero realmente me gustaría encontrar un plugin jQuery o alguna otra forma de limpiar esto un poco.
Intento crear una "burbuja" que pueda aparecer cuando se active el evento onmouseover y permanecerá abierta mientras el mouse esté sobre el elemento que arrojó el evento onmouseover O si el mouse se mueve a la burbuja. Mi burbuja necesitará tener todas las formas de html y estilo, incluidos hipervínculos, imágenes, etc.
Todos esos eventos totalmente administrados por este complemento ...
¡He programado un jQuery Plugin útil para crear ventanas emergentes de burbujas fácilmente inteligentes con solo una línea de código en jQuery!
Lo que puede hacer: - adjuntar ventanas emergentes a cualquier elemento DOM. - eventos mouseover / mouseout administrados automáticamente! - establecer eventos popups personalizados! - crear ventanas emergentes sombreadas inteligentes! (¡en IE también!) - ¡elige plantillas de estilo popup en tiempo de ejecución! - inserta mensajes HTML dentro de ventanas emergentes! - establecer muchas opciones como: distancias, velocidad, retrasos, colores ...
Las sombras y las plantillas coloreadas de Popup son totalmente compatibles con Internet Explorer 6+, Firefox, Opera 9+, Safari
Puede descargar fuentes desde http://plugins.jquery.com/project/jqBubblePopup
Aunque qTip (la respuesta aceptada) es bueno, comencé a usarlo, y carecía de algunas características que necesitaba.
Luego tropecé con PoshyTip , es muy flexible y muy fácil de usar. (Y podría hacer lo que necesitaba)
Autoresize simple Popup Bubble
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="bubble.css" type="text/css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="bubble.js"></script>
</head>
<body>
<br/><br/>
<div class="bubbleInfo">
<div class="bubble" title="Text 1">Set cursor</div>
</div>
<br/><br/><br/><br/>
<div class="bubbleInfo">
<div class="bubble" title="Text 2">Set cursor</div>
</div>
</body>
</html>
bubble.js
$(function () {
var i = 0;
var z=1;
do{
title = $(''.bubble:eq(''+i+'')'').attr(''title'');
if(!title){
z=0;
} else {
$(''.bubble:eq(''+i+'')'').after(''<table style="opacity: 0; top: -50px; left: -33px; display: none;" id="dpop" class="popup"><tbody><tr><td id="topleft" class="corner"></td><td class="top"></td><td id="topright" class="corner"></td></tr><tr><td class="left"></td><td>''+title+''</td><td class="right"></td></tr><tr><td class="corner" id="bottomleft"></td><td class="bottom"><img src="bubble/bubble-tail.png" height="25px" width="30px" /></td><td id="bottomright" class="corner"></td></tr></tbody></table>'');
$(''.bubble:eq(''+i+'')'').removeAttr(''title'');
}
i++;
}while(z>0)
$(''.bubbleInfo'').each(function () {
var distance = 10;
var time = 250;
var hideDelay = 500;
var hideDelayTimer = null;
var beingShown = false;
var shown = false;
var trigger = $(''.bubble'', this);
var info = $(''.popup'', this).css(''opacity'', 0);
$([trigger.get(0), info.get(0)]).mouseover(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
if (beingShown || shown) {
// don''t trigger the animation again
return;
} else {
// reset position of info box
beingShown = true;
info.css({
top: -40,
left: 10,
display: ''block''
}).animate({
top: ''-='' + distance + ''px'',
opacity: 1
}, time, ''swing'', function() {
beingShown = false;
shown = true;
});
}
return false;
}).mouseout(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
info.animate({
top: ''-='' + distance + ''px'',
opacity: 0
}, time, ''swing'', function () {
shown = false;
info.css(''display'', ''none'');
});
}, hideDelay);
return false;
});
});
});
bubble.css
/* Booble */
.bubbleInfo {
position: relative;
width: 500px;
}
.bubble {
}
.popup {
position: absolute;
display: none;
z-index: 50;
border-collapse: collapse;
font-size: .8em;
}
.popup td.corner {
height: 13px;
width: 15px;
}
.popup td#topleft {
background-image: url(bubble/bubble-1.png);
}
.popup td.top {
background-image: url(bubble/bubble-2.png);
}
.popup td#topright {
background-image: url(bubble/bubble-3.png);
}
.popup td.left {
background-image: url(bubble/bubble-4.png);
}
.popup td.right {
background-image: url(bubble/bubble-5.png);
}
.popup td#bottomleft {
background-image: url(bubble/bubble-6.png);
}
.popup td.bottom {
background-image: url(bubble/bubble-7.png);
text-align: center;
}
.popup td.bottom img {
display: block;
margin: 0 auto;
}
.popup td#bottomright {
background-image: url(bubble/bubble-8.png);
}
Esto también se puede hacer fácilmente con el evento mouseover. Lo he hecho y no toma 200 líneas en absoluto. Comience con activar el evento, luego use una función que creará la información sobre herramientas.
$(''span.clickme'').mouseover(function(event) {
createTooltip(event);
}).mouseout(function(){
// create a hidefunction on the callback if you want
//hideTooltip();
});
function createTooltip(event){
$(''<div class="tooltip">test</div>'').appendTo(''body'');
positionTooltip(event);
};
A continuación, crea una función que coloca la información sobre herramientas con la posición de desplazamiento del elemento DOM que activó el evento mouseover, esto es factible con css.
function positionTooltip(event){
var tPosX = event.pageX - 10;
var tPosY = event.pageY - 100;
$(''div.tooltip'').css({''position'': ''absolute'', ''top'': tPosY, ''left'': tPosX});
};
La nueva versión 3.0 del complemento jQuery Bubble Popup es compatible con jQuery v.1.7.2, actualmente la versión más reciente y estable de la biblioteca javascript más famosa.
La característica más interesante de la versión 3.0 es que puede usar el complemento jQuery & Bubble Popup junto con otras bibliotecas y marcos de JavaScript como Script.aculo.us, Mootols o Prototype porque el complemento está completamente encapsulado para evitar problemas de incompatibilidad;
jQuery Bubble Popup fue probado y es compatible con muchos navegadores conocidos y "desconocidos"; ver la documentación para la lista completa.
Al igual que las versiones anteriores, el complemento jQuery Bubble Popup continúa publicándose bajo la licencia MIT; Puede utilizar jQuery Bubble Popup en proyectos comerciales o personales, siempre que el encabezado de derechos de autor quede intacto.
descargue la última versión o visite demos en vivo y tutoriales en http://www.maxvergelli.com/jquery-bubble-popup/
Me parece que no quieres el mouse sobre los eventos: quieres el evento jQuery hover ().
Y lo que parece querer es una información sobre herramientas "enriquecedora", en cuyo caso sugiero jQuery tooltip . Con la opción bodyHandler puedes poner HTML arbitrario.
Ok, después de un poco de trabajo, puedo obtener una "burbuja" para que aparezca y desaparezca en el momento adecuado. Hay MUCHO estilo que todavía debe suceder, pero este es básicamente el código que utilicé.
<script type="text/javascript">
//--indicates the mouse is currently over a div
var onDiv = false;
//--indicates the mouse is currently over a link
var onLink = false;
//--indicates that the bubble currently exists
var bubbleExists = false;
//--this is the ID of the timeout that will close the window if the user mouseouts the link
var timeoutID;
function addBubbleMouseovers(mouseoverClass) {
$("."+mouseoverClass).mouseover(function(event) {
if (onDiv || onLink) {
return false;
}
onLink = true;
showBubble.call(this, event);
});
$("." + mouseoverClass).mouseout(function() {
onLink = false;
timeoutID = setTimeout(hideBubble, 150);
});
}
function hideBubble() {
clearTimeout(timeoutID);
//--if the mouse isn''t on the div then hide the bubble
if (bubbleExists && !onDiv) {
$("#bubbleID").remove();
bubbleExists = false;
}
}
function showBubble(event) {
if (bubbleExists) {
hideBubble();
}
var tPosX = event.pageX + 15;
var tPosY = event.pageY - 60;
$(''<div ID="bubbleID" style="top:'' + tPosY + ''; left:'' + tPosX + ''; position: absolute; display: inline; border: 2px; width: 200px; height: 150px; background-color: Red;">TESTING!!!!!!!!!!!!</div>'').mouseover(keepBubbleOpen).mouseout(letBubbleClose).appendTo(''body'');
bubbleExists = true;
}
function keepBubbleOpen() {
onDiv = true;
}
function letBubbleClose() {
onDiv = false;
hideBubble();
}
//--TESTING!!!!!
$("document").ready(function() {
addBubbleMouseovers("temp1");
});
</script>
Aquí hay un fragmento del html que lo acompaña:
<a href="" class="temp1">Mouseover this for a terribly ugly red bubble!</a>
Puede usar qTip para esto; Sin embargo, tendrías que codificar un poco para iniciarlo en el evento mouseover; Y en caso de que desee una marca de agua predeterminada en sus campos de texto, deberá usar el complemento de marca de agua ...
Me di cuenta de que esto lleva a un montón de código repetitivo; Así que escribí un complemento en la parte superior de qTip que hace que sea muy fácil adjuntar elementos emergentes informativos a los campos de formulario. Puede verificarlo aquí: https://bitbucket.org/gautamtandon/jquery.attachinfo
Espero que esto ayude.
QTip tiene errores con jQuery 1.4.2. Tuve que cambiar a jQuery Bubble Pop up http://www.vegabit.com/jquery_bubble_popup_v2/#examples y funciona muy bien!
Tiptip es también una buena biblioteca.
Qtip es el mejor que he visto. Está licenciado por MIT, es hermoso, tiene toda la configuración que necesita.
Mi opción ligera favorita es tipsy . También licencia MIT. Inspiró el complemento de información sobre herramientas de Bootstrap .
ColorTip es el más hermoso que he visto en mi vida