Сочетание jquery cluetip и hoverintent? - PullRequest
Новая
       17

Сочетание jquery cluetip и hoverintent?

5 голосов
/ 03 февраля 2011

Я использую подсказку jquery, чтобы показать подсказки :-) Я сделал их липкими, потому что я хочу, чтобы пользователь мог перемещать мышь к показанной подсказке - если он пожелает. Однако, если пользователь не перемещает мышь к всплывающей подсказке, я хочу, чтобы всплывающая подсказка исчезла через некоторое время. Мне кажется, что это должно быть возможно при использовании плагина hoverintent-plugin. Но этот плагин не срабатывает, если пользователь не наведет на него мышь один раз. Если это произойдет, cluetip сама удалит всплывающую подсказку ...

Как получить всплывающую подсказку, подождать 500 мсек, и, если пользователь не наведет курсор мыши на подсказку, чем исчезнуть?

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

У кого-нибудь есть идея получше? : -)

Спасибо

Пол

Ответы [ 4 ]

1 голос
/ 10 октября 2011

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

<a href="#" onclick="activateTip()">click here</a>
<div id="tooltip" style="background: green; height: 30px; width: 50px; color: white;
   display: none; position: absolute">
   fake tooltip
</div>
<script type="text/javascript">

    function activateTip() {
       $("#tooltip").fadeIn(autoFade);
    }

    function autoFade() {
       var cancel = setTimeout(hideTip, 3000);
       $("#tooltip").mouseover(function () {
          clearTimeout(cancel);
          $("#tooltip").unbind("mouseover").mouseout(autoFade);
       });
    }

    function hideTip() {
       $("#tooltip").fadeOut().unbind("mouseover").unbind("mouseout");
    }

</script>
0 голосов
/ 27 марта 2013

Вопрос был в том, можно ли «совместить jquery cluetip и hoverintent?».Простой ответ: да.

Просто загрузите и включите скрипт HoverIntent на своей странице.Сценарий (+ примеры) можно найти по адресу: http://cherne.net/brian/resources/jquery.hoverIntent.html

Когда вы включили HoverIntent, вы можете установить некоторые дополнительные параметры для вашей подсказки:Параметры HoverIntent соответствуют исходным параметрам HoverIntent, которые можно найти по адресу: http://cherne.net/brian/resources/jquery.hoverIntent.html

0 голосов
/ 13 октября 2011

Для этого можно использовать следующий метод.

JQuery: 

//Change it to your tooltip object- ID/Name/Class
$("#tooltip").mouseout(function(){
  $(this).delay(500).queue(function() {
    $(this).css('display', 'none');
  });
//We use this method because, user can come over the element before its disapper.
}).mouseover(function() {
   if($(this).is(':visible'))
     $(this).css('display', '');
});
0 голосов
/ 22 июня 2011

Я использую эту lib с некоторыми настройками.Вы можете заменить строку 77 

$tooltipC.html($tooltip.data("title"));

из этого файла следующей строкой: 

$tooltipC.html(options.content);

И затем использовать ее следующим образом: 

$('.tooltip-target').each(function () {
        $(this).tooltip({
            cssClass: "tooltip",
            content: $($(this).attr("rel")).html()
        });
    });

Как вы можете видеть в моем проекте для каждой цели подсказки, я установил атрибут rel с помощью селектора управления с html для tootlip.Следующим образом: 

<img src="help.ico" class="tooltip-target" rel="#helpTooltip" />
<div style="display:none" id="helpTooltip">
    Some html content for tooltip
    <a href="help.html">Details..</a>
</div>
...