Bootstrap popover работает только на кнопках, а не на якорях или пролетах

Я включаю tooltip.js и popover.js.

Когда моя разметка выглядит так:

<button class="popover-dismiss" data-toggle="popover" title="sheen" 
data-content="&lt;a href=&quot;sheen60&quot;&gt;60&lt;/a&gt;, &lt;a href=&quot;sheen80&quot;&gt;80&lt;/a&gt;">
PDS
</button>

с JS

$('.popover-dismiss').popover({
  trigger: 'focus',
  html: 'true'
})

Тогда все работает нормально. Однако, когда я меняю свой button на a, он ломается. В консоли нет ошибок. Это просто не дает всплывающее окно.

<a href="javascript://" class="popover-dismiss" data-toggle="popover" title="sheen" 
data-content="&lt;a href=&quot;sheen60&quot;&gt;60&lt;/a&gt;, &lt;a href=&quot;sheen80&quot;&gt;80&lt;/a&gt;">
PDS
</a>

Точно такие же атрибуты. Просто якорь вместо кнопки. Я также попытался использовать диапазон, и он тоже не работает.

Ответы

Ответ 1

Хорошо, так получилось, что в Twitter Bootstrap есть ошибка. Он был открыт и закрыт пару раз.

В настоящее время существует работа:

1) Не используйте trigger: focus при инициализации бутстрапов popovers
2) Вместо этого используйте data-trigger="focus" как атрибут для элементов, которые вызовут popover 3) Элементы, у которых есть popover, должны быть явно объявлены tabindex="0".

Пример использования кросс-браузера: http://jsfiddle.net/v5L7m/3/

Я также подтвердил это в сценарии использования в реальных условиях.

Ответ 2

Ну, я думаю, что если вы хотите использовать "фокус" в качестве триггера, ваш элемент должен быть настраиваемым. Установка tabindex заставляет элемент фокусироваться, поэтому при запуске tabindex запускается "focus".

Рассмотрим использование tabindex -1, если вы не ожидаете, что пользователи фактически остановятся на элементе, нажимая клавишу табуляции.

Вот и все. Триггер: фокус может использоваться при инициализации JS.

Ответ 3

Нет необходимости в обходном пути или что-то еще. Он отлично работает, если вы установите информацию через JS, вот пример:

HTML:

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" title="Dismissible popover" data-content="And here some amazing content. It very engaging. Right?">Dismissible popover</a>

JS:

$(function() {
    $(document).popover({
        selector: '[data-toggle=popover]',
        trigger: 'focus'
    });
});

JSFiddle: https://jsfiddle.net/s02ykLo2/

Ответ 4

Попробуйте установить container: 'body' для вызова popover().