Tooltip

See also

Material Design spec, Tooltips

Tooltips display brief labels or messages.

• Use tooltips to add additional context to a button or other UI element

• Two types: plain and rich

• Use plain tooltips to describe elements or actions of icon buttons

• Use rich tooltips to provide more details, like describing the value of a feature

• Rich tooltips can include an optional title, link, and buttons

KivyMD provides two types of tooltip:

1. Plain tooltip

2. Rich tooltip

Usage of tooltip plain

Declarative KV styleDeclarative Python style

from kivy.lang import Builder
from kivy.properties import StringProperty

from kivymd.uix.button import MDButton
from kivymd.uix.tooltip import MDTooltip
from kivymd.app import MDApp

KV = '''
<YourTooltipClass>

    MDTooltipPlain:
        text:
            "Grant value is calculated using the closing stock price \\n" \
            "from the day before the grant date. Amounts do not \\n" \
            "reflect tax witholdings."


<TooltipMDIconButton>

    MDButtonText:
        text: root.text


MDScreen:
    md_bg_color: self.theme_cls.backgroundColor

    TooltipMDIconButton:
        text: "Tooltip button"
        pos_hint: {"center_x": .5, "center_y": .5}
'''


class YourTooltipClass(MDTooltip):
    '''Implements your tooltip base class.'''


class TooltipMDIconButton(YourTooltipClass, MDButton):
    '''Implements a button with tooltip behavior.'''

    text = StringProperty()


class Example(MDApp):
    def build(self):
        self.theme_cls.primary_palette = "Olive"
        return Builder.load_string(KV)


Example().run()

“

“from the day before the grant date. Amounts do not

“

“reflect tax witholdings.”,

)

]

class TooltipMDIconButton(YourTooltipClass, MDButton):

‘’’Implements a button with tooltip behavior.’’’

text = StringProperty()

def __init__(self, **kwargs):

super().__init__(**kwargs) Clock.schedule_once(self.set_widgets)

def set_widgets(self, *args):

self.widgets = [

MDButtonText(

text=self.text, pos_hint={“center_x”: .5, “center_y”: .5}

)

]

class Example(MDApp):

def build(self):

self.theme_cls.primary_palette = “Olive” return (

MDScreen(

TooltipMDIconButton(

text=”Tooltip button”, pos_hint={“center_x”: .5, “center_y”: .5},

), md_bg_color=self.theme_cls.backgroundColor,

)

)

Example().run()

The anatomy of a plain tooltip

Usage of tooltip rich

Declarative KV styleDeclarative Python style

from kivy.lang import Builder
from kivy.properties import StringProperty

from kivymd.uix.button import MDButton
from kivymd.uix.tooltip import MDTooltip
from kivymd.app import MDApp

KV = '''
<YourTooltipClass>

    MDTooltipRich:
        id: tooltip
        auto_dismiss: False

        MDTooltipRichSubhead:
            text: "Add others"

        MDTooltipRichSupportingText:
            text:
                "Grant value is calculated using the closing stock price \\n" \
                "from the day before the grant date. Amounts do not \\n" \
                "reflect tax witholdings."

        MDTooltipRichActionButton:
            on_press: tooltip.dismiss()

            MDButtonText:
                text: "Learn more"


<TooltipMDIconButton>

    MDButtonText:
        text: root.text


MDScreen:
    md_bg_color: self.theme_cls.backgroundColor

    TooltipMDIconButton:
        text: "Tooltip button"
        pos_hint: {"center_x": .5, "center_y": .5}
'''


class YourTooltipClass(MDTooltip):
    '''Implements your tooltip base class.'''


class TooltipMDIconButton(YourTooltipClass, MDButton):
    '''Implements a button with tooltip behavior.'''

    text = StringProperty()


class Example(MDApp):
    def build(self):
        self.theme_cls.primary_palette = "Olive"
        return Builder.load_string(KV)


Example().run()

“

“from the day before the grant date. Amounts do not

“

“reflect tax witholdings.”

), MDTooltipRichActionButton(

MDButtonText(

text=”Learn more”,

), on_press=self.tooltip_dismiss,

), id=”tooltip”, auto_dismiss=False,

),

]

def tooltip_dismiss(self, *args):

MDApp.get_running_app().root.get_ids().tooltip.dismiss()

class TooltipMDIconButton(YourTooltipClass, MDButton):

‘’’Implements a button with tooltip behavior.’’’

text = StringProperty()

def __init__(self, **kwargs):

super().__init__(**kwargs) Clock.schedule_once(self.set_widgets)

def set_widgets(self, *args):

self.widgets = [

MDButtonText(

text=self.text, pos_hint={“center_x”: .5, “center_y”: .5}

)

]

class Example(MDApp):

def build(self):

self.theme_cls.primary_palette = “Olive” return (

MDScreen(

TooltipMDIconButton(

text=”Tooltip button”, pos_hint={“center_x”: .5, “center_y”: .5},

), md_bg_color=self.theme_cls.backgroundColor,

)

)

Example().run()

The anatomy of a plain tooltip

API - kivymd.uix.tooltip.tooltip

class kivymd.uix.tooltip.tooltip.MDTooltip(**kwargs)

Tooltip class.

For more information, see in the TouchBehavior class documentation.

Events:

on_open:

Fired when the tooltip opens.

on_dismiss:

Fired when the tooltip is closed.

tooltip_display_delay

Tooltip display delay.

Note

This property only works on desktop.

tooltip_display_delay is an BoundedNumericProperty and defaults to 0, min of 0 & max of 4.

shift_y

Y-offset of tooltip to the top.

shift_y is an NumericProperty and defaults to 0.

shift_right

Shifting the tooltip to the right.

Added in version 1.0.0.

shift_right is an NumericProperty and defaults to 0.

shift_left

Shifting the tooltip to the left.

Added in version 1.0.0.

shift_left is an NumericProperty and defaults to 0.

delete_clock(widget, touch, *args)

Removes a key event from touch.ud.

adjust_tooltip_position() → tuple

Returns the coordinates of the tooltip that fit into the borders of the screen.

display_tooltip(*args) → None

Adds a tooltip widget to the screen and animates its display.

animation_tooltip_show(*args) → None

Animation of opening tooltip on the screen.

animation_tooltip_dismiss(*args) → None

Animation of closing tooltip on the screen.

Added in version 1.0.0.

remove_tooltip(*args) → None

Removes the tooltip widget from the screen.

add_widget(widget, *args, **kwargs)

Add a new widget as a child of this widget.

on_long_touch(touch, *args) → None

Fired when the widget is pressed for a long time.

on_enter(*args) → None

Fired when mouse enter the bbox of the widget.

on_leave(*args) → None

Fired when the mouse goes outside the widget border.

on_open() → None

Default display event handler.

Changed in version 2.0.0: Rename from on_show to on_open.

on_dismiss() → None

Default dismiss event handler.

Added in version 1.0.0.

class kivymd.uix.tooltip.tooltip.MDTooltipPlain(*args, **kwargs)

Tooltip plain class.

Added in version 2.0.0.

For more information, see in the MDLabel and ScaleBehavior classes documentation.

class kivymd.uix.tooltip.tooltip.MDTooltipRichSupportingText(*args, **kwargs)

Implements supporting text for the MDTooltipRich class.

Added in version 2.0.0.

For more information, see in the MDLabel class documentation.

class kivymd.uix.tooltip.tooltip.MDTooltipRichSubhead(*args, **kwargs)

Implements subhead text for the MDTooltipRich class.

Added in version 2.0.0.

For more information, see in the MDLabel class documentation.

class kivymd.uix.tooltip.tooltip.MDTooltipRichActionButton(*args, **kwargs)

Implements action button for the MDTooltipRich class.

Added in version 2.0.0.

For more information, see in the MDButton class documentation.

on_enter() → None

Fired when mouse enter the bbox of the widget.

on_leave() → None

Fired when the mouse goes outside the widget border.

class kivymd.uix.tooltip.tooltip.MDTooltipRich(*args, **kwargs)

Tooltip rich class.

Added in version 2.0.0.

For more information, see in the DeclarativeBehavior and ThemableBehavior and BackgroundColorBehavior and CommonElevationBehavior and ScaleBehavior and StateLayerBehavior and BoxLayout and classes documentation.

auto_dismiss

This property determines if the view is automatically dismissed when the cursor goes outside of the tooltip body.

auto_dismiss is a BooleanProperty and defaults to True.

on_leave() → None

Fired when the mouse goes outside the widget border.

dismiss() → None

Hides the tooltip.