Tooltip

Un facile à utiliser ajax tooltip / script boîte de pop-up, qui fournit des informations supplémentaires lorsque l'utilisateur plane le curseur sur un élément, sans cliquer dessus. Il est un petit "Hoverbox" avec des informations sur l'élément en cours planait au-dessus.

Traits

  • Entièrement personnalisable tooltip. Vous pouvez aussi ajuster la couleur de fond / largeur de bulles individuelles.
  • Hoverbox contenu peut inclure des images, des images avec du texte, et une légende ainsi que d'autres HTML riche.
  • Le pop-up est généralement utilisé pour fournir une interface entre un pointeur et le bouton-poussoir.
  • Supporte tous les navigateurs modernes.

Prévue

Télécharges

Javascript Code
<!-- Script by hscripts.com -->
<!-- Copyright of HIOXINDIA -->
<!-- More scripts @www.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" src="htooltip/ajax.js"></script>
<!-- Script by hscripts.com -->


HTML Code
<!-- 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> Il suffit de dÃ&copy;placer le curseur de la souris sur le bouton ou l'image. <br><br><br>
<input type="button" id="b1" value="BOUTON" 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="http://www.hscripts.com" id="dum" style='text-decoration:none; color: #dadada;'>Ã&copy; hscripts.com</a>
</div>
<!-- Script by hscripts.com -->
  • Date de Parution - 2011-03-07
  • Trouvez la version gratuite sans lien de droits d'auteur seulement pour $5/-
  • Pour personnaliser ce script ou pour le développement d'un script, contactez-nous à, support@hscripts.com

Usage

  • Téléchargez et décompressez les fichiers. Vous obtiendrez les fichiers nécessaires..
  • Copiez le code ci-dessus et collez-le dans votre page Web.
  • Le fichier contient les images utilisées dans ce script infobulle. Inclure les lignes suivantes dans votre code pour utiliser les images. pic1.src='htooltip/bubble_top.gif'; pic2.src='htooltip/bubble_middle.gif'; pic3.src='htooltip/bubble_bottom.gif';
  • Vous pouvez changer le message dans le "Hoverbox" à l'aide des fichiers tooltip1.html et tooltip2.html.
  • créer un bouton de type propriétés = "button" id = "B1" value = "Button" onmouseover = "showtooltip (« htooltip/tooltip1.html ',' bubble_tooltip_content, even
  • "onmouseout =" hideToolTip () " et créer un lien avec les propriétés href = "#" onmouseover = "showtooltip (htooltip/tooltip2.html,« bubble_tooltip_content, even
  • "onmouseout =" hideToolTip () "pour le mot" Lien "Votre message est passé comme argument pour la fonction javascript showtooltip («tooltip1.html ',' bubble_tooltip_content, événemen
  • Sur pointant le curseur sur le bouton ou le lien, le showtooltip fonction («tooltip2.html ',' bubble_tooltip_content 'événemen
  • est déclenchée et la boîte de pop-up se affichées.

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.

Ajax Script