Consistent tooltips between different components

[saskliutas]

Hi, I was wondering what is the best approach to have consistent tooltips when mixing different components. We have tree component that has some buttons above in the header. There are some IconButtons and some Buttons. For IconButton we pass label and get stylized tooltip. For Button we use title and get native browser tooltip. Also for tree node Checkbox we use title property and get native tooltip. I made a small example of this. You can take a look how different tooltips pop up when navigating through elements with TAB: https://stackblitz.com/edit/github-2d7cav?file=src%2FApp.tsx

Do I need to add Tooltip to the components instead of using title property?

[mayank99]

Hey @saskliutas, sorry we seem to have missed this. The short answer is: Yes, you should use <Tooltip> instead of the title attribute. (And <IconButton label> is basically a shortcut for <Tooltip><IconButton></Tooltip> with some extra accessibility baked in).

The title attribute has lots of issues and is even discouraged in the HTML spec itself. iTwinUI's Tooltip remedies most of these issues, and we have described some of the accessibility considerations and best practices in our documentation. One of the things to keep in mind is that Tooltip should be only used for providing supplementary (non-critical) information to the user.

Hopefully that clarifies things. Feel free to ask any follow-up questions. :)

See also: #2182