@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.27.0 (2021-05-05)

Bug Fixes

• @clayui/css: Date Picker previous-month-date and next-month-date active should be lighter (51a24f3)
• @clayui/css: Menubar convert old Sass map keys to key names so older keys used by previous versions will win (9a1a73a)
• @clayui/css: Menubar update $menubar-vertical-expand-md and $menubar-vertical-expand-lg to use new keys. Older keys will still win over new keys to preserve backward compatibility. (12b9636)
• @clayui/css: Mixins clay-form-control-variant old keys should win over new keys (8986a81), closes #3987
• @clayui/css: Mixins clay-menubar-vertical-expand use clay-css mixin pattern (6a9ba26)
• @clayui/css: Mixins clay-menubar-vertical-variant moves default styles to variables. The mixin should only output styles if values are given. (703b76e)
• @clayui/css: Progress Bar sets a min-width on progress-group-addon to prevent resizing progress bar when numbers are changed to icons (63e63c0), closes #4024
• @clayui/css: Sass maps passed into clay-form-control-variant mixin should use new keys. This allows variable theme overwrites using deprecated keys to still win. (f3be2d6), closes #3987
• @clayui/date-picker: DatePickerDayNumber use the classes previous-month-date and next-month-date to style day outside the month instead of disabled (f25ab71), closes #4036
• @clayui/shared: add unit test for FocusScope (f84332f)
• @clayui/shared: update and simplify logic for focus management when focus moves in and out of the react tree (e3a100f)

Features

• @clayui/css: SVG Icons add rotate (0fec9ce)
• @clayui/css: SVG Icons adds order-list-down and order-list-up (f80f8a0), closes #4021
• @clayui/multi-select: add async functionality for source items (548aa2d)
• @clayui/panel: adds the small API to Panel.Group (b8428dc)
• @clayui/popover: add observeRect to align the popover on the scroll (8bedd2f)