@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.32.0 (2021-07-28)

Bug Fixes

• @clayui/autocomplete: fixes a potential XSS vulnerability in autocomplete by removing the use of dangerouslySetInnerHTML (675910c)
• @clayui/color-picker: fix error of "hidden" input add extra margin (f4d8aa0)
• @clayui/css: Cadmin Links adds component-text and component-icon, generic names for reuse in other components (ae49f03)
• @clayui/css: Cadmin Treeview new component (ea1568e)
• @clayui/css: Forms form-group-sm div.form-control should be 32px tall and grow to fix content inside, similar to a textarea element (eb987a1), closes #4164
• @clayui/css: Grid generating container-max-width-* classes should work with Custom Properties (b12dbf5)
• @clayui/css: Mixins update clay-loading-animation-variant to use clay-css pattern (4280c6f), closes #3987
• @clayui/css: Mixins update sheet-footer-btn-block to use clay-css pattern (5523b67), closes #3987
• @clayui/css: Sheet $sheet-lg-max-width should use fixed number instead of generating based on a $container-max-widths value (5968bd5)
• @clayui/css: Utilities remove duplicate rounded utilities (6687624)
• @clayui/shared: fixes error when getting stuck in an input masked as hidden (4c0c5cb)
• @clayui/tooltip: Hide tooltip on dragstart (70d78da)
• clayui.com: fixes error when generating slugs for documents inside packages (5e00f5a)

Features

• @clayui/core: Add Provider component and the new @clayui/core package (1d4e4b3)
• @clayui/core: adds theme API to Provider (e7bae7d)
• @clayui/css: $container-max-widths Sass map should accept CSS Custom Properties (3a8ffe2)
• @clayui/css: Buttons use nested property names in variables to stay as close as possible to the way our CSS is written (89e3360), closes #4176
• @clayui/css: Functions adds map-deep-get for getting values of deeply nested Sass map items (2b80302)
• @clayui/pagination-bar: Add the showDeltasDropDown prop (6c65f43), closes #4175