Je voulais un plugin jquery pouvant prendre en charge les liens dans l'info-bulle. Je ne pouvais pas trouvé un.Info-bulle jquery avec des liens
Répondre
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>
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
Cela fonctionne, mais je dois faire quelques ajustements pour le faire fonctionner correctement. – San
Faites défiler jusqu'à [Scripting on/off] (http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html#scripting) – mplungjan