Skip to main content

Tooltip

Provide delayed supplementary text for a labelled control without replacing its accessible name.

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let basicTooltip =
    Tooltip.create "archive-tooltip" "Moves the account out of active lists." (fun descriptionId ->
        Button.create (ButtonContent.Text "Archive")
        |> Button.withAttributes [ _ariaDescribedby descriptionId ]
        |> Button.render)
    |> Tooltip.render

On this page

Installation

Copy this component and its required dependencies into the consumer-owned Components project.

dotnet fve add tooltip --config src/Acme.Components/fve.json

The CLI resolves dependencies and preserves consumer-authored files. See Installation for project initialization and Tailwind source detection.

Usage

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let basicTooltip =
    Tooltip.create "archive-tooltip" "Moves the account out of active lists." (fun descriptionId ->
        Button.create (ButtonContent.Text "Archive")
        |> Button.withAttributes [ _ariaDescribedby descriptionId ]
        |> Button.render)
    |> Tooltip.render

Existing description

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let describedTooltip =
    div {
        _class "grid gap-3"
        p { _id "archive-description"; _class "text-sm text-[var(--fve-muted-text)]"; "Archived accounts remain searchable." }
        Tooltip.create "described-archive-tooltip" "Moves the account out of active lists." (fun descriptionId ->
            Button.create (ButtonContent.Text "Archive")
            |> Button.withAttributes [ _ariaDescribedby ("archive-description " + descriptionId) ]
            |> Button.render)
        |> Tooltip.render
    }

Bottom placement

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let bottomTooltip =
    Tooltip.create "bottom-placement-tooltip" "Moves the account out of active lists." (fun descriptionId ->
        Button.create (ButtonContent.Text "Archive")
        |> Button.withAttributes [ _ariaDescribedby descriptionId ]
        |> Button.withVariant ButtonVariant.Outline
        |> Button.render)
    |> Tooltip.withSide TooltipSide.Bottom
    |> Tooltip.withDelay 150
    |> Tooltip.render

API reference

type TooltipSide =
    | Top
    | Bottom
    | Start
    | End

type TooltipConfig

/// Apply the trigger renderer's description ID to the focusable control's aria-describedby.
/// Append existing description IDs and retain the control's accessible name.
/// Tooltip content must not contain interactive controls or information unavailable elsewhere.
module Tooltip =
    val create : id:string -> description:string -> trigger:(string -> HtmlElement) -> TooltipConfig
    val withSide : side:TooltipSide -> config:TooltipConfig -> TooltipConfig
    val withDelay : milliseconds:int -> config:TooltipConfig -> TooltipConfig
    val withAttributes : attributes:HtmlAttribute list -> config:TooltipConfig -> TooltipConfig
    val render : config:TooltipConfig -> HtmlElement