1

I have a form where bootstrap tooltips are appended via Javscript. These elements have HTML title attributes (just like in the bootstrap example), and there are also elements in the form that have popovers which have been added using HTML as well.

For some reason, the tooltip appears on elements where I didn't initialize it - meaning that there is a clash between my popovers and tooltips.

I have tried using different tags like <span> <div> and <button> in an attempt at preventing the conflict, but my popovers and tooltips continue to display at the same time.

Any ideas why this might be happening?

madth3
  • 7,275
  • 12
  • 50
  • 74
Panther
  • 8,938
  • 3
  • 23
  • 34

1 Answers1

1

I ran into something similar and while I still haven't figured out the source of the problem (I'm sure I did something stupid), I was able to find a work-around to remedy the issue.

You need to initialize either your tooltip or popover with something other than Bootstrap's default selector and title attributes.

So instead of this...

$('body').tooltip({
            container: 'body',
            selector: '[data-toggle="tooltip"]'
        });

<span data-toggle="tooltip" title="My Title" data-placement="top"></span>

Do this...

$('body').tooltip({
            container: 'body',
            selector: '.bs-tooltip',
            title : function () {
               return $(this).attr('tooltip-title');
            }
        });

<span class="bs-tooltip" tooltip-title="My Title" data-placement="top"></span>

Just make sure you change both the selector and title. Changing just the title won't correct the clash and changing just the selector will lead to Bootstrap adding the title and data-original-title attributes to your element and the tootip or popover will look to them for their information, and since they're empty nothing will show.

BBC
  • 11
  • 2