2009-11-28 2 views

ответ

0

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> 
+0

Это работает, но я должен сделать некоторые настройки, чтобы он работал правильно. – San

+0

Выделите [Scripting on/off] (http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html#scripting) – mplungjan

2

Это одна позволяет иметь почти ничего (HTML/текст) в подсказке:
http://jquery.bassistance.de/tooltip/demo/

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

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

+0

На самом деле мне нужна ссылка на изображение с надписью «change image» , ссылка должна появиться только тогда, когда пользователь наводится на изображение. Знаете ли вы плагин, который делает это? – San

+0

Хорошо заметили, как нажать ссылку – kingchris