A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Add to library
<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>
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
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
Add to library
<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>