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

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

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

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

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

Заранее спасибо за вашу помощь!

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

 <a class="icons-extras-small small-icon float-right" href="#" data-toggle="popover" title="More Options"></a>

 <a class="icons-status-small small-icon float-right" href="#" data-toggle="popover" title="Set Status"></a>

 <a class="icons-tag-small small-icon float-right tweet_edit_tags_link" id="{{tweet.id}}_edit_tags_link" href="#tags-modal" data-toggle="modal" title="Add Tags"></a>

Вы можете видеть, что первые два используют атрибут 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>