JQuery подсказка со ссылками на него - PullRequest
Новая
       3

JQuery подсказка со ссылками на него

0 голосов
/ 28 ноября 2009

Мне нужен плагин jquery, который может поддерживать ссылки во всплывающей подсказке. Я не смог найти один.

Ответы [ 2 ]

2 голосов
/ 28 ноября 2009

Этот позволяет вам иметь почти все (html / текст) во всплывающей подсказке:
http://jquery.bassistance.de/tooltip/demo/

Мой вопрос к тебе. Предполагается, что всплывающие подсказки могут появляться при наведении курсора на текст / элемент и исчезать при наведении. Поэтому, если у вас обычное поведение всплывающей подсказки, ссылка на всплывающую подсказку исчезнет, ​​прежде чем ваша мышь нажмет на нее.

Возможно, вам придется реализовать что-то для этого. Задержка исчезновения или всплывающая подсказка, расположенная наложением или просто рядом с элементом. : P

0 голосов
/ 28 ноября 2009

BeautyTips поддерживает HTML-контент (включая ссылки) во всплывающих подсказках:

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

Редактировать

BeautyTips работает с HoverIntent, чтобы дать пользователю время нажать на ссылку всплывающей подсказки. Смотрите этот пример: 

<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>
...