Tailwind CSS React Tooltip

Basic example

In the following example you can see the button that will trigger the tooltip element to be shown when hovered or focused.

        
            
      import React from "react";
      import { TETooltip } from "tw-elements-react";
      
      export default function TooltipBasicExample(): JSX.Element {
        return (
          <div className="text-center">
            <p className="mb-0">
              Hover the link to see the
              <TETooltip
                tag="a"
                title="Hi! I'm a tooltip!"
                wrapperProps={{ href: '#' }}
                className="text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600 pointer-events-auto cursor-pointer"
              >
                tooltip
              </TETooltip>
            </p>
          </div>
        );
      }

Overview

Things to know when using the tooltip plugin:

Tooltips are opt-in for performance reasons, so you must initialize them yourself.
Tooltips with zero-length titles are never displayed.
Triggering tooltips on hidden elements will not work.
Tooltips for disabled elements must be triggered on a wrapper element.
When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use whitespace-nowrap class on your <a> tags or elements to avoid this behavior.
Tooltips must be hidden before their corresponding elements have been removed from the DOM.
Tooltips can be triggered thanks to an element inside a shadow DOM.

Hey there 👋 we're excited about TW Elements for React and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Four directions

Hover over the buttons below to see the four tooltips directions: top, right, bottom, left. Check API Properties to see all available options.

        
            
      import React from "react";
      import { TETooltip } from "tw-elements-react";
      
      export default function TooltipFourDirections(): JSX.Element {
        return (
          <div className="flex space-x-1">
            <TETooltip
              title="Tooltip on top"
              className="max-w-[160px] rounded bg-primary-100 px-6 py-2 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"
            >
              Tooltip on top
            </TETooltip>
            <TETooltip
              title="Tooltip on right"
              placement="right"
              className="max-w-[160px] rounded bg-primary-100 px-6 py-2 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"
            >
              Tooltip on right
            </TETooltip>
            <TETooltip
              title="Tooltip on bottom"
              placement="bottom"
              className="max-w-[180px] rounded bg-primary-100 px-6 py-2 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"
            >
              Tooltip on bottom
            </TETooltip>
            <TETooltip
              title="Tooltip on left"
              placement="left"
              className="max-w-[160px] rounded bg-primary-100 px-6 py-2 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"
            >
              Tooltip on left
            </TETooltip>
          </div>
        );
      }

And with custom HTML added:

        
            
      import React from "react";
      import { TETooltip } from "tw-elements-react";
      
      export default function TooltipWithHTML(): JSX.Element {
        return (
          <div className="flex justify-center items-center">
            <TETooltip
              title={
                <>
                  <em>Tooltip</em> <u>with</u> <b>HTML</b>
                </>
              }
              className="rounded bg-primary-100 px-6 py-2 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"
            >
              Tooltip with HTML
            </TETooltip>
          </div>
        );
      }

Disabled elements

Elements with the disabled attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper <div> or <span>, ideally made keyboard-focusable using tabIndex={0}, and override the pointer-events on the disabled element.

        
            
      import React from "react";
      import { TETooltip } from "tw-elements-react";
      
      export default function TooltipDisabled(): JSX.Element {
        return (
          <div className="text-center">
            <TETooltip
              title="Disabled tooltip"
              tag="span"
              className="inline-block"
              tabIndex={0}
            >
              <button
                className="pointer-events-none inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] disabled:opacity-70 dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                type="button"
                disabled
              >
                Disabled button
              </button>
            </TETooltip>
          </div>
        );
      }

If you are looking for more advanced options, try Bootstrap Tooltip from MDBootstrap.

Import

Properties

TETooltip

Name	Type	Default	Description
`boundary`	string \| element	`'clippingParents'`	Overflow constraint boundary of the tooltip (applies only to Popper's preventOverflow modifier). Accepts the values of `'viewport'`, `'window'`, `'scrollParent'`, or an HTMLElement reference (via JavaScript only). For more information refer to Popper's detectOverflow docs.
`container`	string/boolean	`false`	Appends the tooltip to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.
`enabled`	Boolean	`true`	Gives an element’s popover the ability to be shown. Popovers are enabled by default.
`fallbackPlacement`	String/Array	`["top", "right", "bottom", "left"]`	Allow to specify which position Popper will use on fallback. For more information refer to Popper's behavior docs.
`offset`	Array	`[0, 0]`	Offset of the tooltip relative to its target. For more information refer to Popper's offset docs.
`popperConfig`	Object	`-`	Allows to change the default Popper config, see Popper's configuration.
`placement`	String	`'top'`	Sets the position of the tooltip. Available properties: `"top" \| "auto" \| "auto-start" \| "auto-end" \| "bottom" \| "right" \| "left" \| "top-start" \| "top-end" \| "bottom-start" \| "bottom-end" \| "right-start" \| "right-end" \| "left-start" \| "left-end"`
`tag`	String	`'button'`	Define tag of the wrapper element.
`theme`	Object	`{}`	Allows to change the Tailwind classes used in the component.
`title`	String / HTML	`-`	Defines the tooltip text.
`tooltipClassName`	String	`-`	Add custom class to the tooltip element.
`tooltipTag`	String	`'div'`	Define tag of the `TETooltip` element.
`trigger`	String	`'hover focus'`	How tooltip is triggered - `click` \| `hover` \| `focus`. You may pass multiple triggers; separate them with a space.
`wrapperProps`	Object	`-`	Add custom properties to the tooltip wrapper.

Classes

Custom classes can be passed via theme prop. Create an object with classes like below and pass it to the prop.

Name	Default	Description
`fade`	transition-opacity ease-linear motion-reduce:transition-none	Sets animation effect for the tooltip.
`tooltip`	z-[1080] block p-1 not-italic font-normal no-underline underline-offset-auto normal-case leading-6 tracking-normal break-normal whitespace-normal	Sets the default tooltip classes.
`tooltipInner`	text-sm max-w-[200px] py-1.5 px-4 text-white text-center bg-[#6d6d6d] rounded-[0.25rem]	Sets the default classes on the content of the tooltip.

Events

Event type	Description
`onHide`	This event is fired immediately when the hide method has been called.
`onHidden`	This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).
`onShow`	This event fires immediately when the show instance method is called.
`onShown`	This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).

        
            
        import React from "react";
        import { TETooltip } from "tw-elements-react";
        
        export default function TooltipEventsExample(): JSX.Element {
          return (
            <div className="text-center">
              <TETooltip
                title="Hi! I'm a tooltip!"
                onShow={() => console.log("show")}
                className="max-w-[160px] rounded bg-primary-100 px-6 py-2 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"
              >
                Tooltip
              </TETooltip>
            </div>
          );
        }

Tooltip