Popover Bootstrap 5.3 - W6 Beta 11

[Alexander_Paladines]

Wappler 6 Beta 11 | Windos | Nodejs | Beta Channel

Hi,
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.

Workaround:

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>

[franse]

I reported the click issue a few times:

Popover still failing

W10 5.1.5 As i said in my previous post, popover issue was not fixed, but changed the “click” default option. See: ScreenRecorderProject1

[patrick]

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.

[Alexander_Paladines]

Thanks @patrick, it works perfectly.

[Alexander_Paladines]

@patrick

Will have that updated in the UI with the next update

Wappler 6.0.0 Beta 12 Released

But wait there is more! We have improved the terminal on Windows 11 and added some extra Bootstrap 4 and 5 beta fixes. Wappler terminals Improved on Windows 11 Bootstrap 4 & 5 betas In Popover and Tooltips renamed title label from Text to Title Updated default value for bs5 popover trigger from click to hover Fixed bootstrap 5 popover title (wrong attribute) Wrong method call in bootstrap navigation General Improved automatic assets update and includes in the head Fixed issues Popover B…

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

[patrick]

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.