1. Components
  2. tooltip

Tooltip

Small informative popup that appears on element hover.

Demo 

<x-ui.tooltip.trigger tooltip-id="demo-1" size="sm" iconOnly variant="outline" intent="gray" radius="circle">
    <span class="flex iconify text-xs ph--caret-down"></span>
</x-ui.tooltip.trigger>
<x-ui.tooltip id="demo-1" content="Tooltip content"/>

Installation

  1. Install the component

    Shell 
    php artisan flexi:add tooltip

  2. Install tooltip dependencies

    This component requires JS behavior. Flexiwind examples use Flexilla .
    1. With Alpine/Livewire
      2. Shell 
      npm i @flexilla/alpine-tooltip

      Add plugin in flexilla.js

      flexilla.js 
      import AlpineTooltip from "@flexilla/alpine-tooltip"

Alpine.plugin(AlpineTooltip)
    2. Without Alpine
      3. Shell 
      npm i @flexilla/tooltip

      Initialize tooltip in flexilla.js

      flexilla.js 
      import { Tooltip } from "@flexilla/tooltip"

// init tooltip for all Element with data-app-tooltip attribute
Tooltip.autoInit('[data-app-tooltip]')

API

Prop Description
x-ui.tooltip
Main tooltip content container attached to trigger by id.
id (required)
Unique id used as tooltip-{id} .
placement (top|right|bottom|left...)
Preferred tooltip placement.
bg (default|gray|neutral|dark)
Background style preset for tooltip content.
trigger (hover|click)
Switches trigger strategy between hover and click. Default: hover
x-ui.tooltip.trigger
Trigger helper component with tooltipId plus button props.
Prev
Accordion

Vertically collapsin...

Next
On this page