Popover Bootstrap 5.3 - W6 Beta 11

Wappler 6 Beta 11 | Windos | Nodejs | Beta Channel

The popover is not working.
Looks like the dynamic attributes are incorrect.
This is what Dynamic Attributes creates:

Component creates this code:
<a class="nav-item nav-link active text-primary" href="#" dmx-bs-popover="'Content by Wappler'" dmx-bind:popover-title="'Title by Wappler'">Home</a>

And this is the render in browser, there is no title.

Trigger click event doesn’t works too, as you can see in first image “Click” is selected but in the code there is nothing about trigger attribute, and in the render it acts as Hover and not click.


If I manually add dmx-bind:data-bs-title and dmx-bind:data-bs-content the popover works normally.
<a class="nav-item nav-link active text-primary" href="#" dmx-bs-popover="" dmx-bind:data-bs-title="'Title by User'" dmx-bind:data-bs-content="'Content by User'" >Home</a>

I reported the click issue a few times:

Here an update for the popover script, will work with the popover-title and data-bs-title attribute: dmxBootstrap5Popovers.zip (431 Bytes)

The UI has the wrong default defined, in Bootstrap 4 the click trigger was default and in Bootstrap 5 it was changed to hover focus. Will have that updated in the UI with the next update.

Thanks @patrick, it works perfectly.

Hi, sorry, in this update the default hover focus for Boostrap 5 is not working, in this W6 Beta12 look like is the same since Hover act as Click yet and Focus has not effect. Thanks

Not sure why there are that many error in the Bootstrap 5 docs, had to check in their source code to be sure what the default trigger is and it seems to be click instead of hover. The docs on their site is wrong.

Popovers · Bootstrap v5.3 (getbootstrap.com)

I’ve updated the default back to click, don’t know why the click didn’t work in previous version (Popover still failing - Wappler General / Bugs - Wappler Community) but tested the new script without setting an argument for the trigger and it will use the click as trigger. Sorry that it took this long to figure out and we didn’t test it enough. We updated the UI elements based on the docs from Bootstrap and the script is tested independent from the UI which is why we didn’t notice it.

1 Like