Class Tooltip

The Tooltip component is used to create a tooltip for an element. It requires a single child element to be passed to it. Passing multiple children or fragments will throw an error.

You should use this for any tooltips you create to allow for backwards compatibility when we switch to another tooltip library instead of Bootstrap tooltips.

If you need to pass multiple children, surround them with another element, such as a <span> or <div>.

Note: this component will overwrite the title attribute of the first child you pass to it, as this is how the current tooltip system works in Flarum. This shouldn't be an issue if you're using this component correctly.

Example

Basic usage

         <Tooltip text="You wish!">
           <Button>
             Click for free money!
           </Button>
         </Tooltip>

Example

Use of `position` and `showOnFocus` attrs 3 replies

Example

Incorrect usage

         // This is wrong! Surround the children with a <span> or similar.
         <Tooltip text="This won't work">
           Click
           <a href="/">here</a>
         </Tooltip>