Twitter Bootstrap Twipsy - зависание над всплывающей подсказкой

Question

Я пытаюсь использовать Twitter Bootstrap Twipsy в качестве всплывающей подсказки со ссылкой внутри подсказки.

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

Есть ли способ это исправить?

Спасибо.

Answer 1

Мне трудно поверить, что один из создателей bootstrap сказал вам, что это невозможно, так как, безусловно, так оно и есть - просто нужно немного повозиться.

Вот решение в coffeescriptи jquery, протестировано и работает:

timer = null
el = null
el2 = null
$('[rel=twipsy]').live
  mouseenter: ->
    $('.twipsy').remove()
    $(this).twipsy('show')
  , mouseleave: ->
    el = $(this)
    timer = setTimeout((-> 
      el.twipsy('hide')
      $('body .twipsy:last-child').remove()
    ), 10)

$('.twipsy').live
  mouseenter: ->
    clearTimeout(timer)
    el2 = $(this)
    el2.css 'z-index', 1000 if el2.hasClass 'in'
  , mouseleave: ->
    timer = setTimeout((->
      el.twipsy('hide')
      el2.css 'z-index', 1
      $('body .twipsy:last-child').remove()
    ), 10)

Если вы работаете с приложением, которое получает большой трафик, должно работать в старых браузерах или на старых компьютерах или иным образом сильно зависит от производительности, я очень рекомендуюразвернуть собственное решение здесь, так как использование большого количества живых обработчиков не очень хорошая идея.Но для чего-то маленького / нормального, это работает просто отлично.Я обнаружил только одну маленькую очень странную ошибку, которая может появиться (хотя и редко), если вы зависаете определенным образом.Проблема перекрытия решается с помощью манипулирования z-индексом.

Если вам нужно это в vanilla javascript, просто вставьте его в консоль «try coffeescript» на http://coffeescript.org/, и она скомпилируется для вас.

Answer 2

Я думаю, что вам действительно нужны были Twitter Popovers.

http://twitter.github.com/bootstrap/javascript.html#popovers

Подсказки используются только для отображения некоторой информации (именно поэтому она называется «подсказка»).Где, если вам нужно взаимодействие с пользователем, вам нужно использовать Popovers.

Теперь здесь может возникнуть вопрос о удобстве использования: зачем увеличивать клик пользователя, если мы можем добиться того же, используя всплывающую подсказку.Но это дает пользователю контроль над временем, которое он хочет для взаимодействия.Так что, на мой взгляд, это улучшает юзабилити.Вы не можете сказать пользователю щелкнуть ссылку в течение 2 секунд (установлен тайм-аут), иначе она исчезнет.Это не подходит для удобства использования

Я ценю работу, проделанную для этого ответа, и, хотя ответ верен, решение не подходит.

Надеюсь, я дал понять, что ясно.

Answer 3

Вы можете установить триггерный переключатель на «ручной», а затем связать события, такие как «mouseenter», с функцией, которая использует таймер, чтобы подождать несколько секунд перед закрытием. Попробуйте это:

$(element).twipsy({
    trigger:'manual'
});
$(element).bind('mouseover',function(){
    $(element).twipsy('show');
    if ( $(element).data('timerIsGoing') !== true ) {
        $(element).data('timerIsGoing',true);
        setTimeout(function(){
            $(element).twipsy('hide');
        }, 2000);
    }
});

Это даст пользователю 2 секунды, чтобы перейти по ссылке.

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

Answer 4

Если вы прочитали мой комментарий выше и у вас возникла та же проблема, это то, что сработало для меня.

Вы можете установить задержку анимации около 300 мс, которую он фактически упоминает в документации.

Answer 5

У меня была такая же проблема, но у меня были загружены и jQuery.js, и Prototype.js. Запрет загрузки файла prototype.js устраняет проблему.