Chakra-UI

I♥️Components

Tooltip

|

Chakra Docs

|

⦾ The Tooltip component is a text label that appears when the user hovers over, focuses on, or touches an element. It's used to display information about an element when the element receives keyboard focus or the mouse hovers over it. Tooltips are helpful for new users who are getting familiar with your product's interface.

The Tooltip component itself is the only requirement for creating a tooltip in Chakra UI, but it's often wrapped around the component that you want to trigger the tooltip.

These are some of the properties that you can use with Tooltip:

  • label: The text that is displayed when the tooltip appears. This property is required.
  • openDelay and closeDelay: These properties control the delay (in milliseconds) before the tooltip shows and hides, respectively.
  • placement: This property changes the position of the tooltip relative to the children. The possible values are "top", "bottom", "left", "right", and combinations like "top-start", "top-end", etc.
  • hasArrow: This boolean property controls whether the tooltip has an arrow pointing to the children.
  • isDisabled: This boolean property allows you to control if the tooltip will be shown.

This component can be imported as follows:

Examples

Basic Usage

⦾ The following is a very simple example of a tooltip in its most basic sense. Mousing over the button, which is wrapped in a Tooltip triggers an overlap tooltip message.

Code

Implementing Properties

⦾ In this example, the tooltip text will appear 500 milliseconds after the user hovers over the Button. The tooltip will also have an arrow pointing to the button and it will be positioned on top of the button.

Code

Custom Components with Tooltip

⦾ When creating a tooltip on a custom component, make sure that the custom component accepts a ref using React.forwardRef. This allows the tooltip to correctly associate with the custom component.

In this example, we create a CustomTag component using a Chakra UI Tag as a base. This CustomTag is then wrapped with a tooltip.

Custom Tag in a Box

Code

Incorporating an Icon

⦾ You can wrap an icon in a Tooltip to display helpful information about the icon's functionality. It's important to wrap the icon in a span element as icons from react-icons do not use forwardRef.

This example exhibits this functionality in a more silly way. I think this smiley icon has something to say to you. Hover to find out what!

Code

Focused Content

⦾ When the child of a Tooltip is focusable, such as a Button, the tooltip will show when the button is focused or hovered over.

Code

Tooltip Placement Options

⦾ The placement property allows you to adjust the location of your tooltip relative to the child component.

Below is a dropdown menu that contains all of the placement options for tooltips. It is set to "auto placement" by default. But you can choose from the options to see how a tooltip placement renders in relation to the element around which it is wrapped. Just hover over the giant button-box to see it in action!

Each placement position is a combination of two parts: an edge (top, bottom, left, or right) and an alignment (start, end, or none). Because these types of spatial relationships can be a bit tricky at first to comprehend, here's what each placement means:

  • auto-start, auto, auto-end: The auto placements will position the tooltip relative to the target based on the available space in the viewport. If 'start' or 'end' is specified, it will align the tooltip accordingly if space permits.
  • top-start, top, top-end: These placements will position the tooltip above the target element. top-start aligns the start of the tooltip with the start of the target, top centers it, and top-end aligns the end of the tooltip with the end of the target.
  • bottom-start, bottom, bottom-end: These placements will position the tooltip below the target element. Similar to the top placements, bottom-start aligns the start of the tooltip with the start of the target, bottom centers it, and bottom-end aligns the end of the tooltip with the end of the target.
  • left-start, left, left-end: These placements will position the tooltip to the left of the target element. left-start aligns the top of the tooltip with the top of the target, leftcenters it, and left-end aligns the bottom of the tooltip with the bottom of the target.
  • right-start, right, right-end: hese placements will position the tooltip to the right of the target element. right-start aligns the top of the tooltip with the top of the target, right centers it, and right-end aligns the bottom of the tooltip with the bottom of the target.

Keep in mind that the actual placement of the tooltip may vary slightly based on the available space in the viewport. If there is not enough space for the chosen placement, the tooltip will automatically adjust to fit.

Code

Other Properties

⦾ Below are more tooltips. Each Button shows in code how to achieve its respective effect.

Did you know?

Creative Idea No. 1

Tooltip with Input Form: The following example contains two FormControl sections, each composed of a FormLabel and an Input field. Chakra UI's FormControl provides a streamlined way to manage related form elements and their respective labels, ensuring a consistent layout and behavior. The Tooltip wraps around a Button element, providing extra information to the user when they hover over or focus on the button. The tooltip's text is dynamically sourced from the tooltipLabel variable, demonstrating the ease of injecting dynamic content into Chakra UI components.

Code

Creative Idea No. 2

Dynamic Tooltip: In this example, the tooltip's content changes based on the current state of the component, which makes for a responsive and interactive user experience. Here, theTooltip wraps around a Button element, and the tooltip's label changes depending on whether the button has been clicked or not. We use the useBoolean hook from Chakra UI to manage the button's clicked state, and the handleClick function toggles this state. The tooltip's label then displays different text based on this state, providing a dynamic tooltip experience.

Code

Creative Idea No. 3

Using Tooltip Delay: This example shows a tooltip that only appears after a certain delay, which can be used to prevent accidental reveals of tooltips. In this instance, the Tooltipcomponent wraps around a Button and uses the openDelay property to specify a delay of 1000 milliseconds (or 1 second) before the tooltip will appear. This feature is useful when you want to prevent tooltips from appearing instantly, such as when a user accidentally hovers over a button. The openDelay property showcases Chakra UI's flexibility and attention to enhancing user experience.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.