Tooltip

Tooltip is same as Popover with one different - no delay on mouse hover.

TooltipBosons

Color
Color from the Tailwind palette.
type: string
default: white
values: white, primary, secondary, warning, info, success, danger
Id
Id reference.
type: string
default: tooltip
Placement
The position of the tooltip.
type: string
default: bottom
Offset
Offset size.
type: string
default: 10

Examples

Basic example
Some content
Reference id
The tooltip activation button should always contain the 'data-x-ref' attribute. The default tooltip ID value is 'tooltip'.
 1// Basic example
 2
 3@protons.Floating(&protons.FloatingBosons{Type: "tooltip"}) {
 4  @atoms.Button(
 5    &atoms.ButtonBosons{
 6      Size:  "md",
 7      Title: "Button",
 8      Attrs: gopress.Attrs{
 9        "data-x-ref":  "tooltip",
10      },
11    },
12  )
13  @atoms.Tooltip(
14    &atoms.TooltipBosons{}) {
15      Some content
16  }
17}
Example with options
Some content
 1// Example with id reference, placement and custom color
 2
 3@protons.Floating(&protons.FloatingBosons{Type: "tooltip"}) {
 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.Tooltip(&atoms.TooltipBosons{
14    Id:        "someitem",
15    Placement: "right",
16    Color:     "primary",
17  }) {
18      Some content
19  }
20}

Let's dive deeper and connect!

Gopress is brought to you by Pay For Done. We specialize in crafting products and services rooted in design systems. Join our community to discuss how we can support you.


© 2024 Pay For Done. All Rights Reserved. Website compliant with W3C validation.