Tooltip/Hoverbox

Una manera fácil de usar el script emergente tooltip, el cual proporciona información adicional cuando el usuario pasa el cursor sobre un elemento, sin necesidad de hacer clic. Es una pequeña "Hoverbox" con información sobre el elemento.

Características

  • Totalmente personalizable descripción. Puede modificar el color de fondo / ancho de sugerencias individuales.
  • Hoverbox contenido puede incluir imágenes, imágenes con texto, y un título, así como HTML enriquecido.
  • El pop-up se utiliza generalmente para proporcionar una interfaz entre el puntero y el botón.
  • Soporta todos los navegadores modernos.

Prevista


Basta con mover el cursor del raton sobre el boton o imagen.




Enlace

Código

Javascript Código

<!-- Script by hscripts.com -->
<style type = "text/css">
#bubble_tooltip{
width:210px;
position:absolute;
display: none;
}
#bubble_tooltip .bubble_top{
position:relative;
background-image: url(htooltip/bubble_top.gif);
background-repeat:no-repeat;
height:18px;
}
#bubble_tooltip .bubble_middle{
position:relative;
background-image: url(htooltip/bubble_middle.gif);
background-repeat: repeat-y;
background-position: bottom left;
}
#bubble_tooltip .bubble_middle div{
padding-left: 12px;
padding-right: 20px;
position:relative;
font-size: 11px;
font-family: arial, verdana, san-serif;
text-decoration: none;
color: red;
text-align:justify;
}
#bubble_tooltip .bubble_bottom{
background-image: url(htooltip/bubble_bottom.gif);
background-repeat:no-repeat;
height:65px;
position:relative;
top: 0px;
}
</style>
<script type="text/javascript">
function showToolTip(url,target,e)
{
if(!document.getElementById)
{
return false;
}
if(window.ActiveXObject)
{
link = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
link = new XMLHttpRequest();
}
if(link == undefined)
{
return false;
}
link.onreadystatechange = function() { response(url, target,e);
}
link.open("GET", url, true);
link.send(null);
}

function response(url, target,e)
{
if(link.readyState == 4)
{
if(link.status==200)
if(document.all)e = event;
document.getElementById(target).innerHTML = link.responseText;
var obj = document.getElementById('bubble_tooltip');
obj.style.display = 'block';
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;
var leftPos = e.clientX-2;
if(leftPos<0)leftPos = 0;
obj.style.left = leftPos 'px';
obj.style.top = e.clientY-obj.offsetHeight 2 st 'px';
}
}
function hideToolTip()
{
document.getElementById('bubble_tooltip').style.display = 'none';
}
function ctck()
{
var sds = document.getElementById("dum");
if(sds == null){alert("You are using a free package.
You are not allowed to remove the tag.
");}
var sdss = document.getElementById("dumdiv");
if(sdss == null){alert("You are using a free package.
You are not allowed to remove the tag.
");}
}
</script>
<!-- Script by hscripts.com -->


HTML Código

<!-- Script by hscripts.com -->
<table id="bubble_tooltip" align=center border=0 cellpadding=0 cellspacing=0>
<tr class="bubble_top"><td></td></tr>
<tr class="bubble_middle"><td><div id="bubble_tooltip_content"></div></td></tr>
<tr class="bubble_bottom"><td colspan=5></td></tr>
</table>
<br><br><br> Basta con mover el cursor del raton sobre el boton o imagen. <br><br><br>
<input type="button" id="b1" value="BUTTON" style='cursor:pointer;' onmouseover="showToolTip('htooltip/tooltip1.html','bubble_tooltip_content',event)" onmouseout="hideToolTip()"></input>
<br><br> <a href="#" onmouseover="showToolTip('htooltip/tooltip2.html','bubble_tooltip_content',event)" onmouseout="hideToolTip()"> LINK </a>
<div align=center style='font-size: 10px; color: #dadada;' id="dumdiv">
<a href="https://www.hscripts.com" id="dum" style='text-decoration:none; color: #dadada;'>Ã��ïÿýÃ�ïÃ�ÿÃ�ýÃ��ïÿýÃ��Ã�Ã&copy; hscripts.com</a>
</div>
<!-- Script by hscripts.com -->
  • Fecha de lanzamiento - 2011-06-22
  • Trouvez la version gratuite sans lien de droits d'auteur seulement pour $5
  • Para la personalización de este script o de cualquier desarrollo de script contacte con nosotros, support@hscripts.com

Uso

  • Descargar y descomprimir los archivos. Usted recibirá los archivos necesarios.
  • Copia el código anterior y péguelo en su página web.
  • El archivo contiene las imagenes usadas en este Tooltip script. pic1.src='htooltip/bubble_top.gif'; pic2.src='htooltip/bubble_middle.gif'; pic3.src='htooltip/bubble_bottom.gif';
  • Usted puede cambiar el mensaje sobre hoverbox usando tooltip1.php and tooltip2.php files.
  • Su mensaje es pasado como argumento para la función de javascript showtooltip('tooltip1.php','bubble_tooltip_content',event)
  • Al señalar con el cursor el link o el botón, la función showtooltip('tooltip2.php','bubble_tooltip_content',event) es liberada y las caja pop-up box es mostrada.

License

  • Ce javascript (mal orthographié en tant que script java) / Le code HTML est donnée sous la licence GPL
  • à savoir l'utilisation gratuite pour ceux qui l'utilisent comme il est..
  • Gratuit, si votre modification ne supprime pas notre droit d'auteur et des liens.
  • Licence informations détaillées peuvent être trouvées ici.
  • You can purchase the script if your requirements does not meet GPL License terms.