I'm trying to modify the icon example from to display multiple icons, each with its own set of attributes that display when the icon is clicked. The issue I'm having is that if icon1 is clicked, and then icon2 is clicked, before clicking anywhere else, icon2's popover contains the contents of icon1's popover.

I've tried various things, like running the popover('destroy'), but nothing seems to work.

I've created a jsfiddle to illustrate the problem, and included a hacky fix that I've commented out.

  • I have the same problem, tips text no change. I have try to use your idea but I have not understand. Have you a jsfiddle exmaple or web page that works well? Thank you very much. – user66950 Feb 10 '16 at 14:33
  • Please do not post questions as answers. If you have a new question, ask it. – John Powell Feb 10 '16 at 14:55

After coming back to this problem with fresh eyes, I've finally found a solution.

I read up on the documentation (http://getbootstrap.com/javascript/#popovers).

Instead of calling the popover function with parameters, I first set the html data attributes for each property of the popover that I want to customize, and I then call popover() without any parameters.

$(popup).attr( 'data-placement', 'top' ); $(popup).attr( 'data-original-title', feature.get('title') ); $(popup).attr( 'data-content', '<pre>' + feature.get('placeName') + '</pre>' ); $(popup).attr( 'data-html', true ); //now call bootstrap popover function $(popup).popover()

  • Hello, Do you have a fiddle for this or more contextual code so I can also make it work? thx – stallingOne Jan 11 '18 at 14:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.