Tooltips

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: relative styles 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).

Tooltips are automatically built in to the Button component and will be displayed if the tooltipLabel prop is defined.

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.

print
print
print
print

Tooltips will not appear on a composed component if the tooltipLabel is not specified. Here are some examples of a link.

No tooltip
Some link!
Some link!
Some link!

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.

Some absolutely positioned text
Another line of text
T

Tooltips will not appear on a wrapped component if the label is not specified.

An element without tooltip