tooltip

Basecoat documentation: https://basecoatui.com/components/tooltip/

Tooltip helpers for short helper text on interactive elements.

Note: This component requires JavaScript from Basecoat.

Anatomy

A tooltip setup usually includes a trigger element and a content panel.

Recipe

import glaze/basecoat/tooltip
import lustre/element/html

fn my_tooltip() {
  tooltip.tooltip("my-tooltip", [
    tooltip.trigger([], [html.text("Hover me")]),
    tooltip.content([], [html.text("Tooltip text")]),
  ])
}

References

MDN ARIA tooltip role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tooltip_role
MDN Popover API: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API

Values

align

</>

pub fn align(a: String) -> attribute.Attribute(msg)

align_center

</>

pub fn align_center() -> attribute.Attribute(msg)

align_end

</>

pub fn align_end() -> attribute.Attribute(msg)

align_start

</>

pub fn align_start() -> attribute.Attribute(msg)

content

</>

pub fn content(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

content_with_id

</>

pub fn content_with_id(
  tooltip_id: String,
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

side

</>

pub fn side(s: String) -> attribute.Attribute(msg)

side_bottom

</>

pub fn side_bottom() -> attribute.Attribute(msg)

side_left

</>

pub fn side_left() -> attribute.Attribute(msg)

side_right

</>

pub fn side_right() -> attribute.Attribute(msg)

side_top

</>

pub fn side_top() -> attribute.Attribute(msg)

</>

pub fn tooltip(
  id: String,
  children: List(element.Element(msg)),
) -> element.Element(msg)

trigger

</>

pub fn trigger(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

trigger_with_id

</>

pub fn trigger_with_id(
  tooltip_id: String,
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)