Popover
Popover is same as Dropdown with one different - is activated on mouse hover.
PopoverBosons
Id
Id reference.
type:
stringdefault:
popoverPlacement
The position of the popover.
type:
stringdefault:
bottomOffset
Offset size.
type:
stringdefault:
10Examples
Basic example
Some content
Reference id
The popover activation button should always contain the 'data-x-ref' attribute. The default popover ID value is 'popover'.
1// Basic example
2
3@protons.Floating(&protons.FloatingBosons{Type: "popover"}) {
4 @atoms.Button(
5 &atoms.ButtonBosons{
6 Size: "md",
7 Title: "Button",
8 Attrs: gopress.Attrs{
9 "data-x-ref": "popover",
10 },
11 },
12 )
13 @atoms.Popover(
14 &atoms.PopoverBosons{}) {
15 <div class="p-1 mt-1 w-56 h-56 flex justify-center items-center dark:text-primary-100">
16 Some content
17 </div>
18 }
19}Example with options
Some content
1// Example with id reference, placement and custom offset
2
3@protons.Floating(&protons.FloatingBosons{Type: "popover"}) {
4 @atoms.Button(
5 &atoms.ButtonBosons{
6 Size: "md",
7 Title: "Button",
8 Attrs: gopress.Attrs{
9 "data-x-ref": "someitem",
10 },
11 },
12 )
13 @atoms.Popover(&atoms.PopoverBosons{
14 Id: "someitem",
15 Placement: "right",
16 Offset: "20",
17 }) {
18 <div class="p-1 mt-1 w-56 h-56 flex justify-center items-center dark:text-primary-100">
19 Some content
20 </div>
21 }
22}