Tooltip
Tooltips display additional information based on a specific action.
A tooltip's target is based on the for attribute which points to an element id.
Tooltip( _.forId := "tooltip-trigger")("This is a tooltip"),Button( _.id := "tooltip-trigger")("Hover Me")Examples
Placement
Use the placement attribute to set the preferred placement of the tooltip.
div( cls("tooltip-placement-example"), div( cls("tooltip-placement-example-row"), Button(_.id := "tooltip-top-start")(), Button(_.id := "tooltip-top")(), Button(_.id := "tooltip-top-end")() ), div( cls("tooltip-placement-example-row"), Button(_.id := "tooltip-left-start")(), Button(_.id := "tooltip-right-start")() ), div( cls("tooltip-placement-example-row"), Button(_.id := "tooltip-left")(), Button(_.id := "tooltip-right")() ), div( cls("tooltip-placement-example-row"), Button(_.id := "tooltip-left-end")(), Button(_.id := "tooltip-right-end")() ), div( cls("tooltip-placement-example-row"), Button(_.id := "tooltip-bottom-start")(), Button(_.id := "tooltip-bottom")(), Button(_.id := "tooltip-bottom-end")() )),Tooltip(_.forId := "tooltip-top-start", _.placement.topStart)("top-start"),Tooltip(_.forId := "tooltip-top", _.placement.top)("top"),Tooltip(_.forId := "tooltip-top-end", _.placement.topEnd)("top-end"),Tooltip(_.forId := "tooltip-left-start", _.placement.leftStart)("left-start"),Tooltip(_.forId := "tooltip-right-start", _.placement.rightStart)("right-start"),Tooltip(_.forId := "tooltip-left", _.placement.left)("left"),Tooltip(_.forId := "tooltip-right", _.placement.right)("right"),Tooltip(_.forId := "tooltip-left-end", _.placement.leftEnd)("left-end"),Tooltip(_.forId := "tooltip-right-end", _.placement.rightEnd)("right-end"),Tooltip(_.forId := "tooltip-bottom-start", _.placement.bottomStart)("bottom-start"),Tooltip(_.forId := "tooltip-bottom", _.placement.bottom)("bottom"),Tooltip(_.forId := "tooltip-bottom-end", _.placement.bottomEnd)("bottom-end")Click Trigger
Set the trigger attribute to click to toggle the tooltip on click instead of hover.
Tooltip( _.forId := "toggle-button", _.trigger := "click")("Click to Toggle"),Button(_.id := "toggle-button")("Hover Me")Manual Trigger
Tooltips can be controller programmatically by setting the trigger attribute to manual. Use the open attribute to control when the tooltip is shown.
val openVar = Var(false)div( Button()( onClick --> Observer { _ => openVar.update(!_) }, marginRight.rem(4), "Toggle Manually" ), Tooltip( _.open <-- openVar, _.forId := "manual-trigger-tooltip", _.trigger := "manual" )("This is an avatar!"), Avatar(_.id := "manual-trigger-tooltip")())Removing Arrows
You can control the size of tooltip arrows by overriding the --wa-tooltip-arrow-size design token. To remove the arrow, use the without-arrow attribute.
Tooltip( _.forId := "no-arrow", _.withoutArrow := true)("This is a tooltip with no arrow"),Button(_.id := "no-arrow")("No Arrow")To override it globally, set it in a root block in your stylesheet after the Web Awesome stylesheet is loaded.
:root {
--wa-tooltip-arrow-size: 0;
}HTML in Tooltips
Use the default slot to create tooltips with HTML content. Tooltips are designed only for text and presentational elements. Avoid placing interactive content, such as buttons, links, and form controls, in a tooltip.
Tooltip( _.forId := "rich-tooltip", _.withoutArrow := true)( div( "I'm not ", strong("just"), " a tooltip, I'm a ", em("tooltip"), " with HTML!" )),Button(_.id := "rich-tooltip")("Hover me")Setting a Maximum Width
Use the --max-width custom property to change the width the tooltip can grow to before wrapping occurs.
Tooltip( _.forId := "wrapping-tooltip", _.style := "--max-width: 80px;")( "This tooltip will wrap after only 80 pixels."),Button(_.id := "wrapping-tooltip")("Hover me")