Components

Popover

Basics

Using the component Popover, you can create a popover.

make(
string $title,
string $trigger,
string $placement = 'right',
)
make(
string $title,
string $trigger,
string $placement = 'right',
)
  • title - title in the popover,
  • trigger - text or html that pops up when you hover over it,
  • placement - location of the popover is relative to the trigger.

For an up-to-date list of available locations, see tippy.js documentation.

Popover::make('Title', 'Trigger')
->content('HTML content')
Popover::make('Title', 'Trigger')
->content('HTML content')

Without using the component

<span x-data="popover" data-content="HTML HERE">
<a class="text-purple font-semibold">Popover 1</a>
</span>
<span x-data="popover" data-content="HTML HERE">
<a class="text-purple font-semibold">Popover 1</a>
</span>

or

<span
x-data="popover({placement: 'top'})"
title="Popover title"
data-content="HTML HERE">
<a class="text-purple font-semibold">Popover 2</a>
</span>
<span
x-data="popover({placement: 'top'})"
title="Popover title"
data-content="HTML HERE">
<a class="text-purple font-semibold">Popover 2</a>
</span>