@clayui/tooltip
Advanced tools
import { Tooltip, TooltipProvider, TooltipProviderRenderer, } from '$packages/clay-tooltip/docs/index';
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.
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 prop gives you the ability to format the content passed to the Tooltip via the title attribute to meet your requirements.
FAQs
ClayTooltip component
We found that @clayui/tooltip demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.