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.
Install the plugin from npm:
npm install @fluid-design/fluid-ui
Then add the plugin to your tailwind.config.js file:
<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>
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>
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>// ...
By default, the plugin uses the following configuration:
Variable | Description | Default |
---|---|---|
--tooltip-width | The width of the tooltip | fit-content |
--tooltip-min-height | The minimum height of the tooltip | fit-content |
--tooltip-arrow-width | The width of the tooltip arrow | 12px |
--tooltip-arrow-height | The height of the tooltip arrow | 12px |
--tooltip-background-color | The background color of the tooltip | theme("colors.stone.700") |
--tooltip-color | The color of the tooltip | theme("colors.stone.50") |
--tooltip-border-radius | The border radius of the tooltip | theme("spacing.1") |
--tooltip-padding | The padding of the tooltip | ${theme("spacing.1")} ${theme("spacing.2")} |
--tooltip-font-size | The font size of the tooltip | theme("fontSize.sm") |
--tooltip-arrow-border-color | The border color of the tooltip arrow | theme("colors.stone.700") |
--tooltip-arrow-border-radius | The border radius of the tooltip arrow | 3px |
--tooltip-pointer-events | The pointer events of the tooltip | none |