1. Components
  2. tooltip

Tooltip

A small, informative pop-up that appears when hovering over an element, offering additional context or instructions.

Flexilla Tooltip 
<button data-tooltip-trigger data-tooltip-id="tooltip-default" aria-controls="popper"
    class="btn btn-icon-sm rd-full btn-white ui-btn-white text-fg-subtitle">
    <span aria-hidden="true" class="flex i-ph-caret-down"></span>
</button>
<div aria-labelledby="popper" data-tooltip id="tooltip-default" aria-hidden="true"
    class="u-fx-popper w-48 px-4 py-1.5 text-center text-fg-muted truncate bg-bg-muted rd-lg shadow-lg dark:shadow-none shadow-gray-200 invisible fx-open-visible">
    This is a tooltip
</div>
Tooltips require JS, by default we’re using @flexilla/tooltip component, else you can skip this step if you’ve already @flexilla/flexilla.

Usage

  1. Installation 

    npm i @flexilla/tooltip

  2. Usage

    You can globaly init all Popover/Tooltip or init separately every Popover/Tooltip Element 
    import { Tooltip } from "@flexilla/tooltip"
// init Tooltip for all Element with data-fx-tooltip attribute
Tooltip.autoInit()

Trigger on Click 

<button data-tooltip-trigger data-tooltip-id="tooltip-click" aria-controls="popper"
    class="btn btn-icon-sm rd-full btn-white ui-btn-white text-fg-subtitle">
    <span aria-hidden="true" class="flex i-ph-caret-down"></span>
</button>
<div aria-labelledby="popper" data-tooltip id="tooltip-click" aria-hidden="true" data-trigger-strategy="click"
    class="u-fx-popper w-48 px-4 py-1.5 text-center text-fg-muted truncate bg-bg-muted rd-lg shadow-lg dark:shadow-none shadow-gray-200 invisible fx-open-visible">
    This is a tooltip
</div>
Prev
Container

Next
On this page