3

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?

Jbartmann
  • 1,459
  • 4
  • 24
  • 42

2 Answers2

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

mcmac
  • 1,042
  • 9
  • 13
  • 1
    Thanks, but I think you misunderstood my problem. The popover's title is fine. But since bootstrap replaces the `title` attribute with an empty string, there is no tooltip to show. Your solution would only fix any problems with the popover title and content eventually, but not the tooltip. – Jbartmann Mar 13 '17 at 10:14
  • 1
    check now I add tooltip too, maybe this solution will be helpfull for you. – mcmac Mar 13 '17 at 12:36
  • Works great. I'm having buttons. onclick I open a popover. I need a tooltip to inform the user what happens when they click this button. Regular title attribut does not work when there's a popver. An additional tooltip with an individual title/text/caption does the trick. – Bernhard Döbler Jun 05 '18 at 16:53
0

I only have experience from using Bootstrap 2.3 Popover. But setting the title with the title option as mcmac suggested will only work if there is no title attribute text for popover to steal in the first place. The only solution I found was using a simple attribute copy to restore the title attribute after running the popover() method:

$('#myElement').attr('title', $('#myElement').attr('data-original-title'));

This one uses jQuery but can probably be done with plain JS.

tonebender
  • 69
  • 4