TooltipComponent

open class TooltipComponent(textFromParam: String?) : EventProperties<HTMLElement>

This component creates a Tooltip

A tooltip should be used to display fast information for the user. The individual text will be shown on hovering the RenderContext' element in which it is called.

This class offers the following configuration features:

  • text can be a vararg, a flow, a list, a flow of list of String or a simple string, optional can be use the @property textFromParam.

  • placement of the text around the RenderContextin which be called. Available placements are top, topStart, topEnd, bottom, bottomStart, bottomEnd, left, leftStart, leftEnd, right, rightStart, rightEnd.

The render function of TooltipComponent uses the fritz2 dev.fritz2.components.popup.PopupComponent

Example usage:

span {
+"hover me"
tooltip("my Tooltip on right side") {
placement { right }
}
}

span {
+"hover me to see a multiline tooltip"
tooltip("first line", "second line"){}
}

span {
+"hover me for custom colored tooltip"
tooltip({
color { danger.mainContrast }
background {
color { danger.main }
}
}) {
text(listOf("first line", "second line"))
placement { bottomEnd }
}
}

See also

Constructors

Link copied to clipboard
fun TooltipComponent(textFromParam: String?)

Functions

Link copied to clipboard
fun render(    context: Tag<HTMLElement>,     styling: BoxParams.() -> Unit,     baseClass: StyleClass,     id: String?,     prefix: String): Div
Link copied to clipboard
fun text(vararg value: String)
fun text(value: String)
fun text(value: List<String>)
fun text(value: Flow<String>)
fun text(value: Flow<List<String>>)

Properties

Link copied to clipboard
open override val events: ComponentProperty<EventContext<HTMLElement>.() -> Unit>

This property enables the client to access all events offered by the underlying HTML element.

Link copied to clipboard
val placement: ComponentProperty<PlacementContext.() -> Placement>