Add a Feature to DBTooltip to trigger Tooltips programmatically

[laberning]

Which generators are impacted?

• All
• HTML
• React
• Angular
• Vue
• Web components
• Power Apps

Reproduction case

It would be nice, if we could trigger Tooltips programmatically, i.e. quite similar to DBPopover, as defined by DBPopoverDefaultProps.

We are currently developing an application that needs to trigger Tooltips by some complex computations, so we can not use the current default trigger via a hover state.

As a workaround we are currently using the data-e2e-hover attribute, but it would be much nicer to have a mechanism for opening the tooltips baked into the framework.

Workaround:

<DBTooltip data-e2e-hover={props.open} />

Also we noticed a comment in the codebase: // TODO: Shall we check if only span, p or direct text was passed as children?

Could we pleeeeassse kindly ask to keep the current behavior and not limit what could be rendered in the Tooltip? 😸
We have some Tootips that show icons and data in a table like structure, stuff that would be hard if not impossible to sqeeze into a <span> or <p>

Expected Behaviour

Would be nice if this feature could be implemented.

Screenshots

No response

Browser version

None

Add any other context about the problem here.

No response

[nmerget]

Hey @laberning, thanks for your response.

Currently the tooltip should only contain text, because it should behave like the default HTML title for screen-readers.

If you want to show complex data, you could use DBPopup as well. There are 2 major differences:

1. aria-expanded & aria-popup instead of aria-describedby -> Tells screen-reader users that multiple content is inside the component
2. The popup has no arrow

Maybe I'm missing something here, but if you need to show some information to a user after a computation the tooltip might be the wrong component. Based on the Best Practices you should avoid tooltips, for important information. Maybe you could ask your designer if he/she have a better solution to show those information to users. Maybe you could use the Notification as example.

Hope this helps, otherwise we can discuss your needs further :)

[nmerget]

I created an interal ticket, Design & Dev will discuss this

[laberning]

@nmerget Thanks for discussing this and feel free to reach out if you need further information.
Would be really nice to have a component that offers the aesthetics of a Tooltip with rich content, and can be triggered by ways other than mouse hovers.

[mfranzke]

see also: db-ui/design-feedback#80