@clayui/tooltip

---

title: 'Tooltip' description: 'Tooltips are brief pieces of information that appear on hover state over an element to clarify its meaning or use for the user.' lexiconDefinition: 'https://liferay.design/lexicon/core-components/popovers-tooltips/' packageNpm: '@clayui/tooltip'

import { Tooltip, TooltipProvider, TooltipProviderRenderer, } from '$packages/clay-tooltip/docs/index';

• TooltipProvider
  • contentRenderer

Simplest way of using Tooltip is by leveraging it's show prop and specifying alignPosition to determine it's position relative to the element it's aligned to.

If you have multiple Tooltips on the page, TooltipProvider allows you to only have to instantiate the component once and simply provide html attributes to the elements that need tooltips.

TooltipProvider

By using the <TooltipProvider> it allows you to add the desired tooltip content on each element as a data attribute.

Here's a list of html attributes that you can provide to children elements of the TooltipProvider:

• title is for the tooltip content.
• data-tooltip-align is for alignment direction.
• data-tooltip-delay is for the delay(ms) before showing the tooltip.

contentRenderer

contentRenderer prop gives you the ability to format the content passed to the Tooltip via the title attribute to meet your requirements.

Changelog

3.39.0 (2021-10-29)

Bug Fixes

• @clayui/css: Adds division polyfill clay-div a function that uses / as a division operation if the function div() does not exist (87aec12)
• @clayui/css: Cadmin Dropdowns updates $dropdown-item-base keys to newer nested keys pattern and remove duplicate $dropdown-item-base (6fc1833)
• @clayui/css: Convert forward slash as division / 2 to * 0.5 as work around for dart-sass deprecation message (aa74003)
• @clayui/css: Convert forward slash as division / to multiplication as work around for dart-sass deprecation message (f9948ec)
• @clayui/css: Dropdown and Cadmin Dropdown removes dropdown-menu::after padding hack for Firefox. This is no longer an issue. (54a0b08)
• @clayui/css: Dropdowns updates $dropdown-item-base keys to newer nested keys pattern (502ea21)
• @clayui/css: Mixins clay-dropdown-item-variant update to accept newer nested keys pattern and deprecate keys: (bcc0e89)
• @clayui/css: Mixins clay-dropdown-menu-variant removes dropdown-menu::after padding hack for Firefox (a7e2c18)
• @clayui/css: Use calc() for calculating widths and sizes instead of Sass division / and don't use Sass percentage function (1b2e127)
• @clayui/css: use correct icon names for flags in spritesheet (4127aec)
• fixes error when starting yarn develop command of the clayui.com (fa0d8c0)

Features

• @clayui/css: Add heading, maps, order-ascending and order-descending SVG icons and update geolocation SVG icon (319f37f)
• @clayui/css: Cadmin Custom Forms custom-control, custom-checkbox, and custom-radio convert to using Sass map pattern (c8826b2)
• @clayui/css: Cadmin Labels convert to using new Sass map pattern (50a1708)
• @clayui/css: Cadmin Stickers adds $cadmin-sticker-sizes Sass map to generate sticker sizes and use Sass placeholders for sticker sizes for easier extends (2630c54)
• @clayui/css: Custom Forms custom-control, custom-checkbox, and custom-radio convert to using Sass map pattern (d60970d)
• @clayui/css: Labels convert to using new Sass map pattern (1de502f)
• @clayui/css: Mixins clay-sticker-variant expand mixin to include most use cases in Clay and make it compatible with deprecated clay-sticker-size mixin (3e703ed)
• @clayui/css: Mixins Custom Forms adds clay-custom-control-input-variant and clay-custom-control-variant mixins (3060c0b)
• @clayui/css: Mixins update clay-label-variant to provide selectors that are generated by clay-label-size (deprecated) and conver to using new Sass map key pattern while still supporting older key names (c0c9a1c)
• @clayui/css: Stickers adds $sticker-sizes Sass map to generate sticker sizes and use Sass placeholders for sticker sizes for easier extends (2da3013)
• @clayui/css: Stickers convert sticker components to use clay-sticker-variant and clay-css mixins for more customizability (f8adb74)
• @clayui/form: add the new sizing API to Select component (2c7848d)
• clayui.com: add heading, maps, order-ascending, order-descending and geolocation SVG icons (a34f3be)