info-bulle jquery avec des liens dessus

StackOverflow https://stackoverflow.com/questions/1811529

  •  06-07-2019
  •  | 
  •  

Question

Je voulais un plugin jquery qui puisse supporter des liens dans l'info-bulle. Je n'ai pas pu en trouver un.

Était-ce utile?

La solution

BeautyTips prend en charge le contenu HTML (y compris les liens) dans les info-bulles:

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

Modifier

BeautyTips fonctionne avec HoverIntent pour donner à l’utilisateur le temps 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>

Autres conseils

Celui-ci vous permet d'avoir presque n'importe quoi (html / text) 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 lors du survol d'un texte / élément et disparaître quand elles ne survolent pas. Donc, si vous avez un comportement d’info-bulle conventionnel, le lien d’info-bulle va disparaître avant que votre souris ne clique dessus.

Vous devrez peut-être implémenter quelque chose pour gérer cela. Une disparition différée ou une info-bulle positionnée de manière à se chevaucher ou juste à côté de l'élément. : P

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top