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.
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:
Custom Components with Tooltip
In this example, we create a CustomTag component using a Chakra UI Tag as a base. This CustomTag is then wrapped with a tooltip.
Incorporating an Icon
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!
Tooltip Placement Options
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.
Did you know?
Creative Idea No. 1
Creative Idea No. 2
Creative Idea No. 3