2009-11-28 4 views

Répondre

0

BeautyTips prend en charge le contenu HTML (y compris les liens) dans les infobulles:

http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html

Modifier

BeautyTips travaille avec HoverIntent pour donner le temps à l'utilisateur de cliquer sur le lien de l'info-bulle. Voir cet exemple:

<html> 
<head> 
<script language="javascript" src="http://f.work/layout/jqueryui/js/jquery-1.3.2.min.js"></script> 
<script language="javascript" src="http://f.work/layout/js/beautytips/other_libs/jquery.hoverIntent.minified.js" charset="utf-8"></script> 
<script language="javascript" src="http://f.work/layout/js/beautytips/other_libs/bgiframe_2.1.1/jquery.bgiframe.min.js" charset="utf-8"></script> 
<!--[if IE]><script src="http://f.work/layout/js/beautytips/other_libs/excanvas_r3/excanvas.js" type="text/javascript" charset="utf-8"></script><![endif]--> 
<script language="javascript" src="http://f.work/layout/js/beautytips/jquery.bt.js" charset="utf-8"></script> 
<script src="http://f.work/layout/js/beautytips/other_libs/jquery.easing.1.3.js" type="text/javascript" charset="utf-8"></script> 
</head> 
<body> 
<img src="/layout/images/logo.png" id="example3" /> 

<script> 

$('#example3').bt(
'<a href="javascript:alert(\'Update the image\')">Change Image</a>', 
{ 
    cssStyles: {color: 'white', fontWeight: 'bold'}, 
    shrinkToFit: true, 
    padding: 20, 
    cornerRadius: 10, 
    spikeLength: 15, 
    spikeGirth: 5, 
    positions: ['left', 'right', 'bottom'], 
    hoverIntentOpts: { 
    timeout: 5000 
    } 
}); 

</script> 
</body> 
</html> 
+0

Cela fonctionne, mais je dois faire quelques ajustements pour le faire fonctionner correctement. – San

+0

Faites défiler jusqu'à [Scripting on/off] (http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html#scripting) – mplungjan

2

Celui-ci vous permet d'avoir presque tout (html/texte) dans l'info-bulle:
http://jquery.bassistance.de/tooltip/demo/

Ma question pour vous. Les info-bulles sont généralement supposées pouvoir apparaître en survolant un texte/élément et disparaître lorsqu'elles ne survolent pas. Donc, si vous avez un comportement d'info-bulle conventionnel, le lien de l'info-bulle va disparaître avant que votre souris se déplace pour cliquer dessus.

Vous devrez peut-être implémenter quelque chose pour gérer cela. Une disparition retardée ou une info-bulle positionnée en chevauchement ou juste à côté de l'élément. : P

+0

En fait, je voulais un lien sur une image disant "changer l'image" , le lien ne devrait apparaître que lorsque l'utilisateur survole l'image. Connaissez-vous un plugin qui fait ça? – San

+0

Bien repéré sur la façon de cliquer sur le lien – kingchris