question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

5.2.0: Popover - Unable to use `getInstance` on `.popover` element

See original GitHub issue

Prerequisites

Describe the issue

Regression from v5.1.3. Can no longer get the Popover instance from the .popover element itself.

e.g.

const popover = bootstrap.Popover.getInstance('.popover');

// popover will be null

it now only works when using it on the trigger, e.g.

const popover = bootstrap.Popover.getInstance('.popover-trigger');

// popover will contain the popover element

Reduced test cases

v5.2.0: https://stackblitz.com/edit/h7ep9y?file=index.html,index.js v5.1.3: https://stackblitz.com/edit/h7ep9y-vtddun?file=index.html

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.2.0

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:1
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
Bugophobiacommented, Aug 1, 2022

That’s what I thought, thank you @GeoSot!

1reaction
GeoSotcommented, Aug 1, 2022

Something like ???

  document.querySelectorAll('[data-bs-toggle="popover"][aria-describedby]').forEach((popover) => {
    bootstrap.Popover.getOrCreateInstance(popover).hide();
  });

(same for tooltip)

Read more comments on GitHub >

github_iconTop Results From Across the Web

Popovers · Bootstrap v5.0
Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site. On this page. Overview; Example:...
Read more >
How do you create and modify popover in Bootstrap 5 using ...
You need to get instance of popover and then use popover_instance._config.content ="some message" to set new content inside your popover .
Read more >
Bootstrap JS Popover Reference - W3Schools
Name Type Default Try it animation boolean true Try it container string, or the boolean false false Try it content string "" Try it
Read more >
Popovers · Boosted v5.1
Example: Using the container option. When you have some styles on a parent element that interfere with a popover, you'll want to specify...
Read more >
Overlays | React-Bootstrap
You can also also have an "arrow" element, like the tooltips and popovers, ... Pro Tip: Using the function form of OverlayTrigger avoids...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found