Tooltip · Panel

Base

Pendiente de documentar.

External Tooltip

Click the below toggle button to reveal external tooltip.

<div>
  <button class="mv-btn" data-mv-tooltip="#external_tooltip" data-mv-tooltip-placement="bottom-start">
    Show Tooltip
  </button>
  <div id="external_tooltip" class="mv-tooltip">
    Hey, a delightful tooltip is here!
  </div>
</div>

Transition

Use Tailwind Transition classes to achieve smooth transitions for your tooltips' appearance.

<button class="mv-btn" data-mv-tooltip="true" data-mv-tooltip-placement="bottom-start">
  Show tooltip<span data-mv-tooltip-content="true" class="mv-tooltip transition-opacity duration-300">Hey, a delightful tooltip is here!</span>
</button>

Advanced Content

The tooltip content can consist of any HTML element, rather than being limited to simple text.

<button class="mv-btn" data-mv-tooltip="true" data-mv-tooltip-placement="bottom-start">
  Show tooltip<span data-mv-tooltip-content="true" class="mv-tooltip"><span class="flex items-center gap-1.5">Trial expires in 29 days<!-- -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert text-yellow-500 size-4" aria-hidden="true">
        <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path>
        <path d="M12 9v4"></path>
        <path d="M12 17h.01"></path></svg></span></span>
</button>

Light Style

Remove the default class tooltip and utilize Tailwind classes to completely customize the appearance and style of your tooltips.

<button class="mv-btn" data-mv-tooltip="true" data-mv-tooltip-placement="bottom-start">
  Show tooltip<span data-mv-tooltip-content="true" class="mv-tooltip mv-tooltip-light">Hey, this is a finely polished tooltip example.</span>
</button>

Popover

Replace the default tooltip class with popover to transform a basic tooltip into a more comprehensive popover, featuring a heading and detailed content.

<div>
  <button class="mv-btn" data-mv-tooltip="#popover_content" data-mv-tooltip-trigger="click" data-mv-tooltip-placement="bottom-start">
    Toggle Popover
  </button>
  <div id="popover_content" class="mv-popover max-w-56">
    <div class="mv-popover-header">Popover Title</div>
    <div class="mv-popover-content">
      Behold this captivating popover content. It’s quite engaging, wouldn’t you
      say?
    </div>
  </div>
</div>

Placement

Use data-mv-tooltip-placement attribute with left , right , top,bottom` values control the tooltip display direction.

<div class="flex items-center justify-center flex-wrap p-10 gap-4">
  <button class="mv-btn" data-mv-tooltip="true" data-mv-tooltip-placement="left">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-move-left size-4" aria-hidden="true">
      <path d="M6 8L2 12L6 16"></path>
      <path d="M2 12H22"></path></svg>Left<span data-mv-tooltip-content="true" class="mv-tooltip">Tooltip positioned at the top.</span></button><button class="mv-btn" data-mv-tooltip="true" data-mv-tooltip-placement="top">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-move-up size-4" aria-hidden="true">
      <path d="M8 6L12 2L16 6"></path>
      <path d="M12 2V22"></path></svg>Top<span data-mv-tooltip-content="true" class="mv-tooltip">Tooltip positioned at the bottom.</span></button><button class="mv-btn" data-mv-tooltip="true" data-mv-tooltip-placement="bottom">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-move-down size-4" aria-hidden="true">
      <path d="M8 18L12 22L16 18"></path>
      <path d="M12 2V22"></path></svg>Bottom<span data-mv-tooltip-content="true" class="mv-tooltip">Tooltip positioned at the left.</span></button><button class="mv-btn" data-mv-tooltip="true" data-mv-tooltip-placement="right">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-move-right size-4" aria-hidden="true">
      <path d="M18 8L22 12L18 16"></path>
      <path d="M2 12H22"></path></svg>Right<span data-mv-tooltip-content="true" class="mv-tooltip">Tooltip positioned at the right.</span>
  </button>
</div>

Trigger Options

Enhance tooltip functionality by utilizing the data-mv-tooltip-trigger attribute with either click or focus to tailor tooltip activation to your preference. By default, tooltips are triggered on hover .

<div class="flex flex-wrap gap-4">
  <button class="mv-btn" data-mv-tooltip="true" data-mv-tooltip-trigger="hover">
    Hover(default)<span data-mv-tooltip-content="true" class="mv-tooltip">I am triggered by hover.</span></button><button class="mv-btn" data-mv-tooltip="true" data-mv-tooltip-trigger="click">
    Click<span data-mv-tooltip-content="true" class="mv-tooltip">I am triggered by click.</span></button><button class="mv-btn" data-mv-tooltip="true" data-mv-tooltip-trigger="focus" tabindex="0">
    Focus<span data-mv-tooltip-content="true" class="mv-tooltip">I am triggered by focus.</span>
  </button>
</div>

Offset

Use data-mv-tooltip-offset="20px,20px" attribute to add distance between the toggle and tooltip element. The pair of x,y value in pixel translates the floating element along the x and y axes.

<button class="mv-btn" data-mv-tooltip="true" data-mv-tooltip-placement="bottom-start" data-mv-tooltip-offset="20px,20px">
  Show tooltip<span data-mv-tooltip-content="true" class="mv-tooltip">Hey, a delightful tooltip is here!</span>
</button>

Delay

Set custom delay timeouts for displaying and hiding tooltips using the data-mv-tooltip-delay-show="1000" and data-mv-tooltip-delay-hide="1000" attributes, specified in milliseconds. The below examples shows and hides the tooltip with 1000ms(1 second) d...

<button class="mv-btn" data-mv-tooltip="true" data-mv-tooltip-placement="bottom-start" data-mv-tooltip-delay-show="1500" data-mv-tooltip-delay-hide="1500">
  Show tooltip<span data-mv-tooltip-content="true" class="mv-tooltip">Hey, a delightful tooltip is here!</span>
</button>

Permanent

Use the data-mv-tooltip-permanent="true" attribute to set tooltips remain persistent and do not close when clicked outside. This feature is exclusive to tooltips triggered by clicking, specified with data-mv-tooltip-trigger="click" .

<button class="mv-btn" data-mv-tooltip="true" data-mv-tooltip-placement="bottom-start" data-mv-tooltip-trigger="click" data-mv-tooltip-permanent="true">
  Show tooltip<span data-mv-tooltip-content="true" class="mv-tooltip">Hey, a delightful tooltip is here!</span>
</button>