Могу ли я использовать атрибут 'title' в Popstash popovers?

Я пытаюсь использовать атрибут 'title' для ссылок, которые активируют Popup popovers без его добавления к самому popover.

В основном, я использую значки для ссылок, которые их активируют, но когда я добавляю тег 'title', он не использует всплывающую подсказку, которая обычно появляется над чем-то, у которого есть заголовок, прикрепленный к нему.

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

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

Здесь немного кода, чтобы показать, что я имею в виду.

Вы можете видеть, что первые два используют атрибут popover и title, который автоматически добавляется к popover и вообще пропускает всплывающую подсказку. Но третий не использует popover и по-прежнему позволяет использовать тег title, как обычно.

Ответы

Ответ 1

Когда вы инициализируете всплывающие подсказки или всплывающие подсказки (которые фактически расширяют всплывающие подсказки, если вы посмотрите на код), Bootstrap помещает содержимое атрибута title в имя data-original-title и очищает его:

Tooltip.prototype.fixTitle = function () {
  var $e = this.$element
  if ($e.attr('title') || typeof ($e.attr('data-original-title')) != 'string') {
    $e.attr('data-original-title', $e.attr('title') || '').attr('title', '')
  }
}

Теперь рассмотрим опцию selector, которая позволяет привязывать popovers к потомкам:

<ul title="Title" data-toggle="popover" data-selector="li > a" data-content="Content">
    <li><a href="#" title="First">Test 1</a></li>
    <li><a href="#">Test 2</a></li>
</ul>

При запуске этого примера вы заметите, что атрибуты данных наследуются, но в заголовке нет.

$('[data-toggle="popover"]').popover();

<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'; return false;" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<ul title="Title" data-toggle="popover" data-selector="li > a" data-content="Content">
    <li><a href="#" title="First">Test 1</a></li>
    <li><a href="#">Test 2</a></li>    
</ul>