Tooltip

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. Add the component

   Shell

   flexi-cli add tooltip

2. Install Dropdown

   This component require JS. By default we're using our own Interactive Component Library Flexilla . Install this only if you didn't accept dependencies installation during component addition.
   1. With Alpine
   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
   Make sure that the popover package is not installed
   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]')