Can I still use the 'title' attribute on Bootstrap popovers?

Question

I'm trying to use the 'title' attribute on links that activate Bootstrap popovers without it actually getting added to the popover itself.

Basically, I'm using icons for the links that activate them, but when I add the 'title' tag, it doesn't use the tooltip that'll usually pop over something that has a title attached to it.

I've done a lot of Googling but I haven't found a way to still use the title tag as a tooltip when using this.

If I have to change to another library for popovers, that's fine but I'd rather not if I don't have to.

Thanks in advance for your help!

Here's a bit of code to show what I mean.

 <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>

You can see the first two use the popover and a title attribute, which automatically gets added to the popover and skips the tooltip altogether. But the third one doesn't use the popover and still allows use of the title tag like normal.

Answer 1

When you initialize tooltips or popovers (which actually extend tooltips, if you take a look at the code), Bootstrap puts the content of the title attribute into data-original-title and clears the former:

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', '')
  }
}

Now let's look into selector option, which lets you bind popovers to descendants:

<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>

When running this example, you'll notice that data attributes get inherited, but the title doesn't.

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" 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>

Now, I found a way to abuse this behavior by setting data-selector="true" which seems to bind the events to the element with this attribute itself (and to be honest, I'm not really sure what's the reason behind this behavior):

<a href="#" title="Real Title" data-toggle="popover" data-selector="true" data-title="Popover Title" data-content="Content">Test</a>

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" 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>

<a href="#" title="Real Title" data-toggle="popover" data-selector="true" data-title="Popover Title" data-content="Content">Test</a>

I believe this code does what you want to achieve.