Следите, чтобы всплывающая подсказка не исчезала при наведении - PullRequest
Новая
       2

Следите, чтобы всплывающая подсказка не исчезала при наведении

0 голосов
/ 03 сентября 2010

Я хочу использовать всплывающую подсказку в качестве панели инструментов.При наведении ссылки я хотел бы, чтобы панель инструментов показывалась, скажем, div, а при входе в область панели инструментов я хочу, чтобы она оставалась видимой, а не скрытой.Итак, мои вопросы:

  • Как показать скрытый div?
  • Как сохранить подсказку видимой при входе в область подсказки?

Ответы [ 2 ]

3 голосов
/ 03 сентября 2010

Tipsy поддерживает «ручной» запуск.Итак, вы хотели бы, чтобы событие «onmouseover» в вашей ссылке вызывало функцию tipsy('show'), а затем для скрытой части, ну ... вероятно, сделайте две вещи: когда вы делаете свое шоу, установите тайм-аутэто автоматически скрывается через х секунд.Затем также установите событие onmouseout для всплывающей подсказки, которое вызывает tipsy('hide').

EDIT : изменил код на что-то, что действительно работает, см. Здесь: http://jsfiddle.net/6FpM8/3/ Благодаря @Джош, за то, что тыкаешь мне, чтобы это сработало. 

var timer;

//setup the toolbar and tipsy
$('#mylink').attr('title','Input here:<input id="toolbar">');
$('#mylink').tipsy({trigger:'manual',gravity:'w', html:true});

//.tipsy class is what the generated tooltip divs have, so we use the 
//live event to link the mouseover/mouseout events
$('.tipsy').live('mouseover',function(e){
  clearTimeout(timer);
});
$('.tipsy').live('mouseout',function(e){
  timer = setTimeout("$('#mylink').tipsy('hide');",3000);//hide the link in 3 seconds
});

//manually show the tooltip
$('#mylink').bind('mouseover',function(e){
   $(this).tipsy('show');
 });
0 голосов
/ 04 апреля 2011

Я сделал это, изменив сам Tipsy. Tipsy присоединяет элемент всплывающей подсказки к document.body в методе show Tipsy.prototype: 

$tip.remove().css({
    top: 0, 
    left: 0, 
    visibility: 'hidden', 
    display: 'block'}).appendTo(document.body);

Если вы измените подсказку на дочернюю по отношению к элементу запуска, jQuery mouseleave не сработает, если вы во всплывающей подсказке: 

$tip.remove().css({
    top: 0, 
    left: 0, 
    visibility: 'hidden', 
    display: 'block'}).appendTo(this.$element[0]);

В моем случае у меня есть div с атрибутом title, который содержит подсказку, а div содержит изображение, на которое нацеливается пользователь. (Я не знаю, сработает ли это, если элемент, содержащий наконечник, бездетен, как img.) Я включаю Типси на div.

...