Which tooltips to use, and why don't the bootstrap tooltips work? #11734

rickfrankel created one year ago

Hi,

It looks as though a combination of ngx-bootstrap tooltips and raw bootstrap tooltips are being used and I'm unsure which ones we should use.

Eg: Roles and tenant settings pages use the raw bootstrap tooltips and other pages (tenant features, widgets and others) use the ngx-bootstrap.

Furthermore the ones that use the raw bootstrap ones (or at least the metronic wrapper around it). Use a strange syntax of data-toggle="tooltip" instead of data-bs-toggle="tooltip"

Further to this none of the other standard options for the bootstrap tooltip and the ones documented on the metronic site don't work either. https://preview.keenthemes.com/html/metronic/docs/base/tooltips#delay-options

Eg:

I add data-bs-delay-hide="1000" to the roles.component.html tooltip and it doesn't work. I tried with data-delay-hide as well. No good.

I also see a lot of default things being set in the metronic theme that don't get applied such as all of the following styles in the style.bundle.css

/* rtl:end:ignore */ .tooltip-inner { max-width: var(--bs-tooltip-max-width); padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x); color: var(--bs-tooltip-color); text-align: center; background-color: var(--bs-tooltip-bg); border-radius: var(--bs-tooltip-border-radius); }

In particular I'm trying to configure the max-width. I've tried it using the bootstrap options to add my own custom css class (as per above doesn't work).

-bs-tooltip-max-width is set to 200px by default but if I change the title of the roles.component.html tooltip to a really long string it doesn't adhere to the max width.

Some magic appears to be going on that I couldn't find yet :)

Any tips on how we should be doing this consistently.

Thanks Rick

3 Answer(s)