Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

<x-portal::tooltip>
     <x-portal::tooltip.trigger>
          <x-portal::button variant="outline">Hover</x-portal::button>
     </x-portal::tooltip.trigger>
     <x-portal::tooltip.content>
          <p>Add to library</p>
     </x-portal::tooltip.content>
</x-portal::tooltip>

Publishing Component

If you want to customize the components, you can publish them by running the following command :

php artisan vendor:publish --tag=portal-ui:tooltip --force

Positioning

Customize the position of the dropdown menu via the position and align props
You can first pass the base side: bottom top left right
Then an alignment modifier like center end start

<x-portal::tooltip>
   <x-portal::tooltip.trigger>
        <x-portal::button variant="outline">Hover</x-portal::button>
   </x-portal::tooltip.trigger>
   <x-portal::tooltip.content align="center" side="top">
        <p>Add to library</p>
   </x-portal::tooltip.content>
</x-portal::tooltip>