Bootstrap popover with html title tooltip

Question

I want to use a bootstrap popover that gets triggered on click and has a (non-bootstrap) tooltip on hover. Normally you would use html title attribute for this. But on initialisation of a popover, bootstrap writes the content of the title attribute to the data-original-title attribute and replaces title with empty string.

For example this:

<a href="#!" data-toggle="popover" data-title="This is the Popover's Title" data-placement="bottom" data-trigger="click" title="This is a Tooltip">
</a>

becomes this after initialisation:

<a data-original-title="This is a Tooltip" href="#!" data-toggle="popover" data-title="This is the Popover's Title" data-placement="bottom" data-trigger="click" title=""></a>

Since title attribute is now empty, no tooltip is shown.

Is there a way to display a tooltip on a popover anchor with plain html?

Answer 1

Hi you can use other data attribute for a title and content of your example, check this:

$('a').each(function() {
  $(this).popover({    
    content : $(this).attr("popover-content"),
    title : $(this).attr("popover-title"),
    placement : "right"
  }),
  $(this).tooltip({    
    title : $(this).attr("tooltip-title"),
    placement : "bottom"
  })
});

<a tooltip-title="This is a Tooltip" href="#!" popover-title="This is the Popover's Title" popover-content="popover content" data-trigger="click">click me</a>

Example on fiddle