Skip to main content

Tooltip Plugin

The tooltip plugin provides a simple way to add tooltips to your application. It is purely CSS based and does not require any JavaScript.

Installation

Install the plugin from npm:


npm install @fluid-design/fluid-ui

Then add the plugin to your tailwind.config.js file:

tailwind.config.js
Copy

// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('@fluid-design/fluid-ui/dist/plugin/core'),
require('@fluid-design/fluid-ui/dist/plugin/tooltip'),
// ...
],
};

Usage


<button data-tooltip-left='Left'>Left</butotn>
<button data-tooltip-right='Right'>Right</butotn>
<button data-tooltip-top='Top'>Top</butotn>
<button data-tooltip-bottom='Bottom'>Bottom</butotn>
<button data-tooltip='Default'>Default</butotn>

Examples

Basic Tooltip

<div className='flex gap-4 px-8 py-24'>
<div data-tooltip-left='Left'>Left</div>
<div data-tooltip-right='Right'>Right</div>
<div data-tooltip-top='Top'>Top</div>
<div data-tooltip-bottom='Bottom'>Bottom</div>
<div data-tooltip='Default'>Default</div>
</div>

Custom Tooltip

<div className='flex gap-4 px-8 py-24'>
<div
data-tooltip-left='Yellow'
style={{
'--tooltip-background-color': '#f6ad55',
'--tooltip-arrow-border-color': '#f6ad55',
'--tooltip-color': '#000',
}}
>
Color
</div>
<div>
<div
data-tooltip-right='Rectangle'
style={{
'--tooltip-border-radius': '0',
'--tooltip-arrow-border-radius': '0',
}}
>
Border Radius
</div>
</div>
</div>

Customization

You can customize the tooltip by overriding the default css variables using data-tooltip-* attributes.


<button
data-tooltip-left='Left'
style={{ '--tooltip-background-color': 'red' }}
>
Left
</button>
// ...

Plugin API

By default, the plugin uses the following configuration:

VariableDescriptionDefault
--tooltip-widthThe width of the tooltipfit-content
--tooltip-min-heightThe minimum height of the tooltipfit-content
--tooltip-arrow-widthThe width of the tooltip arrow12px
--tooltip-arrow-heightThe height of the tooltip arrow12px
--tooltip-background-colorThe background color of the tooltiptheme("colors.stone.700")
--tooltip-colorThe color of the tooltiptheme("colors.stone.50")
--tooltip-border-radiusThe border radius of the tooltiptheme("spacing.1")
--tooltip-paddingThe padding of the tooltip${theme("spacing.1")} ${theme("spacing.2")}
--tooltip-font-sizeThe font size of the tooltiptheme("fontSize.sm")
--tooltip-arrow-border-colorThe border color of the tooltip arrowtheme("colors.stone.700")
--tooltip-arrow-border-radiusThe border radius of the tooltip arrow3px
--tooltip-pointer-eventsThe pointer events of the tooltipnone