Tooltip

Overview

Tooltip is based on the Angular Material tooltip component.

Examples

import mesop as me


def load(e: me.LoadEvent):
  me.set_theme_mode("system")


@me.page(
  on_load=load,
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://google.github.io"]
  ),
  path="/tooltip",
)
def app():
  with me.box(style=me.Style(margin=me.Margin.all(15))):
    with me.tooltip(message="Tooltip message"):
      me.text(text="Hello, World")

API

tooltip

Creates a Tooltip component. Tooltip is a composite component.

PARAMETER	DESCRIPTION
key	The component key. TYPE: str | None DEFAULT: None
position	Allows the user to define the position of the tooltip relative to the parent element TYPE: Literal['left', 'right', 'above', 'below', 'before', 'after'] DEFAULT: 'left'
position_at_origin	Whether tooltip should be relative to the click or touch origin instead of outside the element bounding box. TYPE: bool DEFAULT: False
disabled	Disables the display of the tooltip. TYPE: bool DEFAULT: False
show_delay_ms	The default delay in ms before showing the tooltip after show is called TYPE: int DEFAULT: 0
hide_delay_ms	The default delay in ms before hiding the tooltip after hide is called TYPE: int DEFAULT: 0
message	The message to be displayed in the tooltip TYPE: str DEFAULT: ''