Hylograph.Tooltip

showTooltip :: String -> Number -> Number -> Effect Unit

Show tooltip with content at position

hideTooltip :: Effect Unit

Hide the tooltip

setTooltipClass :: String -> Effect Unit

Set custom CSS class for tooltip styling

onTooltip :: forall d. (d -> String) -> Behavior d

Create a tooltip behavior from a content formatter

This is the simplest way to add tooltips - just provide a function that converts your datum to HTML string content.

Example:

_ <- on (onTooltip \d -> d.name <> ": " <> show d.value) circles

The tooltip will automatically:

• Show on mouse enter at the cursor position
• Hide on mouse leave
• Stay within viewport bounds

onTooltipHide :: forall d. Behavior d

Hide tooltip on mouse leave

Pair with onTooltip for complete tooltip behavior:

_ <- on (onTooltip \d -> d.name) element
_ <- on onTooltipHide element

type TooltipConfig = { backdropFilter :: Maybe String, background :: Maybe String, border :: Maybe String, borderRadius :: Maybe String, boxShadow :: Maybe String, color :: Maybe String, fontFamily :: Maybe String, fontSize :: Maybe String, lineHeight :: Maybe String, maxWidth :: Maybe String, padding :: Maybe String }

Tooltip configuration for programmatic styling

All fields are optional - only specified fields will override defaults. Prefer using CSS via .psd3-tooltip class for base styling, and use this for dynamic themes or application-specific overrides.

configureTooltip :: TooltipConfig -> Effect Unit

defaultConfig :: TooltipConfig

Default configuration (minimal - relies on CSS)

floatingPanelTheme :: TooltipConfig

Floating panel theme - matches blueprint-style floating panels

Features:

• Tan/beige translucent background
• Backdrop blur (glassmorphism)
• Monospace font
• Subtle borders and shadows

darkTheme :: TooltipConfig

Dark theme - traditional dark tooltip

lightTheme :: TooltipConfig

Light theme - clean, minimal light tooltip