Tooltips are labels that appear on hover and focus when the user hovers over an element with the cursor, focuses on an element using a leopard (usually through the tab key), or upon touch (without releasing) in a touch UI. They contain textual identification for the element in question. They may also contain brief helper text regarding the function of the element. The label itself cannot receive input focus.
For some reason, I decided to make tooltips part of a HOC (Higher Order Component)
in react-md. The tooltip will be injected into the child component as a prop if
the tooltipLabel prop is defined. Check out the custom examples below for a more in-depth
guide.
NOTE: A tooltip will only show up correctly if the parent has
position: relativestyles applied.
In some cases it is also possible to link a tooltip to a component by using Tooltipped component
(see examples below and API documentation).
Custom Exampleslink
This example will show how you can create your own versions of tooltipped components
with the usage of the injectTooltip HOC.
Any component can be composed with the tooltip. Here is are some with the FontIcons.
Tooltips will not appear on a composed component if the tooltipLabel is not specified. Here are some examples of a link.
No tooltipTooltipped Exampleslink
This example will show how you can link a tooltip to a component with the usage of the Tooltipped component.
The wrapped component should render its children, or the tooltip will not be shown.
Use setPosition to automatically add position: 'relative'to the style of the wrapped component.
Tooltips will not appear on a wrapped component if the label is not specified.