Блог

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

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

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

Спасибо.

Мне трудно поверить, что один из создателей 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-индексом.

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

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

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

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

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

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

Надеюсь, я ясно выразился.

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

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

Вы можете установить для запуска twipsy значение «вручную», а затем привязать такие события, как «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 секунды, чтобы щелкнуть ссылку.

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

У меня действительно была такая же проблема, но у меня были оба jQuery.js и Prototype.js загружено. Предотвращение prototype.js загрузка устраняет проблему.