Всплывающие подсказки Bootstrap не будут скрываться в новейшей версии Safari 8.0

Question

У меня есть этот странный случай с подсказками Bootstrap (только) в новейшей Safari 8.0. У меня есть форма, и я должен показать подсказку по каждому входу (пожалуйста, не спрашивайте почему).

Вот пример jsfiddle

`http://jsfiddle.net/d61yuy8q/11/`

А вот как это выглядит в Safari 8.0

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

В конце я удалил все обертки и оставил только входные данные, но это также не помогло.

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

Кто-нибудь может придумать какой-нибудь обходной путь для этого?

Answer 1

Вы можете исправить это, добавив ручной триггер (как @play2web использует для всплывающих окон) и удалив все всплывающие подсказки перед отображением новой, как показано ниже:

var showTooltip = function() {
    $('.tooltip').remove(); // This line removes any currently showing tootltips
    $(this).tooltip('show');
};
var hideTooltip = function() {
    $(this).tooltip('hide');
};
$("[data-rel='tooltip']").tooltip({
    trigger: 'manual'
}).focus(showTooltip).hover(showTooltip, hideTooltip);

Недостатком является то, что вы не можете использовать delay функциональность больше.

Answer 2

Лично мне не нравится всплывающая подсказка Boostrap, я создал собственный скрипт для замены tootlip на popover, вот как его использовать

<a href="#" title="This is link">Hello</a>

  $(function() {
      $('[title]').attr("data-rel", "tooltip");
      $("[data-rel='tooltip']")
          .attr("data-placement", "top")
          .attr("data-content", function() {
              return $(this).attr("title")
          })
          .removeAttr('title');


      var showPopover = function() {
          $(this).popover('show');
      };
      var hidePopover = function() {
          $(this).popover('hide');
      };
      $("[data-rel='tooltip']").popover({
          trigger: 'manual'
      }).click(showPopover).hover(showPopover, hidePopover);

  });