Calendar Dynamic Events Tooltip

[FilipiRafael]

Hey there

I’m using the dynamic tooltip with Wappler Calendar Dynamic Events, and I just need to enable the HTML, it’s simple using Bootstrap. I just need to add data-html="true" for example. But unfortunately, isn’t working for me.

Also, as you can see in the screenshot below, I added the strong tag bs4-tooltip-title="<strong>Job Details:</strong>" for testing and the Wappler Tooltip Title Field was more bold, so I think it’s almost working.

But when I save and go to the browser, the tooltip isn’t bold anymore.

Thanks a lot if you can help me, I’ve been trying many combinations to make it work.

[Heather_Mann]

I’m not sure why that’s not working, but you could handle the styling with css.

[Teodor]

In the current version of the calendar component, tooltips do not support HTML code.

[patrick]

Try this updated version: dmxCalendar.zip (3.7 KB)

To enable html for the bootstrap tooltips add bs-tooltip-html="true".

[FilipiRafael]

Hi @patrick, thanks a lot for your help, but unfortunately I tried the new version and still doesn’t work for me.

bs4-tooltip="" bs-tooltip-html="true" bs4-tooltip-title="'<strong>Job Details</strong>'"

Also, I tried: bs4-tooltip="" bs-tooltip-html="true" bs4-tooltip-title="<strong>Job Details</strong>"
And: bs4-tooltip="" bs4-tooltip-html="true" bs4-tooltip-title="'<strong>Job Details</strong>'"

Could you confirm if the new calendar version, the tooltip works with HTML, please?

[FilipiRafael]

Hey @patrick, can you help me with the above question, please? If the HTML can be active would be awesome and my problem will be solved.

[otavionestares]

@FilipiRafael

bs-tooltip-html=“true”

@patrick there are no changes in the file you sent!

[patrick]

Sorry for the late response, due to Easter I had some a long weekend in which I hadn’t checked the Forum. I checked the code and indeed it wasn’t build correctly. Here the update with the correct code.

dmxCalendar.zip (3.7 KB)

[FilipiRafael]

Hi @patrick, thanks a lot for your reply. But unfortunately still doesn’t work. I don’t know why because I’m using the new dmxCalendar version and I added this bellow code as you can see in the bellow screenshot. Do you know why still not working?

bs4-tooltip="" bs4-tooltip-html="true" bs4-tooltip-title="'<strong>Title</strong>'"

[patrick]

Do you get any javascript error or does it show the tooltip unformatted?

You probably also have to escape the html in the attributes like

bs4-tooltip-title="'<strong>Title</strong>'"

[FilipiRafael]

Hi @patrick, it’s not showing any javascript error, it just show the tooltip unformatted.

I tried the same thing, but still not working

And to confirm, I’m using the new calendar version.

bs4-tooltip="" bs4-tooltip-html="true" bs4-tooltip-title="'<strong>Title</strong>'"

[FilipiRafael]

Hi @patrick, what do you think it could be?

[patrick]

I just noticed that the attribute also needed to be added on the base source component, I only added it to the calendar component. Here the updated version.

dmxCalendar.zip (3.7 KB)

[FilipiRafael]

Hi @patrick, thank you very much, it’s working now

Just a question, how about the framework update on Wappler in the new version?
Because for now, the Wappler always opens a modal to give back to the old Calendar version.