Tooltip

A hint on hover or focus, after a short wait.

scheme

forSlots(TooltipSlots)(Recipes.Tooltip({}))

Usage

The function that drew the preview, over the theme module Create a theme writes. The preview passes it the style picked above instead of its default.

export const TooltipStyle = forSlots(TooltipSlots)(Recipes.Tooltip({}))

export const tooltip = <Message>(
  style: NamedStyle<typeof TooltipSlots>,
  model: UiTooltip.Model,
  toMessage: (message: UiTooltip.Message) => Message,
  h: HtmlBuilder<Message>,
): Html =>
  h.submodel({
    slotId: model.id,
    model,
    view: UiTooltip.view,
    viewInputs: {
      anchor: { placement: 'top', gap: 6, padding: 8, portal: false },
      toView: Tooltip.toView([style.mixin], { h }, ({ trigger, panel, isVisible }) =>
        h.div(
          [],
          [
            h.button(trigger, ['Autosave']),
            ...(isVisible ? [h.span(panel, ['Saved a second after you stop typing'])] : []),
          ],
        ),
      ),
    },
    toParentMessage: toMessage,
  })

The recipe ↗This code ↗