Tooltip

Modified on Wed, 22 Jun 2022 at 10:23 AM

The Material UI Element is invisible unless you hover over it so in most situations you will want to add an element inside of it to maximize its use.


In this example I've added padding and a background color to the Tooltip element so you can see its size.



The Tooltip will only appear in Preview mode when you hover over the element it surrounds.

Properties: 

In the State tab of the right hand panel, you will be able to edit the following properties:

Title

This property changes the text that appears in the tooltip




Placement


This property determines where the tooltip will appear in relation to the element it surrounds.




Arrow


This property determines whether or not the popup tooltip has an arrow pointing back to its source.




Enter and Leave Delays


These determine the number of milliseconds the tooltip will wait before appearing on hover. 




Interactive


If this attribute is set to false the tooltip that appears will not be interactive and it will disappear as soon as the element it surrounds is not hovered over. 


If this attribute is set to true the user can interact with the tooltip and hovering over the tooltip will prolong its appearance.



Is controlled


This attribute allows you to set when the tooltip opens and removes the default onHover behavior. You will need to add the action setOpen to the tooltip to enable new behavior:




Open


This attribute will allow the Tooltip to default as open or not, but in order for it to work you need to also have isControlled set to true



Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article