Tooltip

In sepal-ui we have two ways to set tooltips to the widgets. The first one is the built-in sepalwidget.set_tooltip() method available for all widgets, and the external one called sw.Tooltip(*args), depending on your needs you’ll be probably more in favor in one than the other.

Built-in

Built-in tooltip is a new feature supported by sepal_ui>=2.9.0. This integration makes possible to easily wrap a widget with a tooltip. Due to all sepal widgets are inheriting from the base sepal_ui.sepalwidget class, it is possible to call the set_tooltip() method from any component.

Calling this method will store the tooltip view as a parameter of the widget (called with_tooltip), it means that if you want to display the tooltip you’ll have to use this element i.e. widget.with_tooltip. As the widget now is activated and handled by the tooltip, it won’t be longer displayed by itself (i.e. widget will be invisible).

Remember that, even though the widget is wrapped by the tooltip, the widget methods and events have to be called from the element itself.

from sepal_ui import sepalwidgets as sw

# correct colors for the documentation
# set to dark in SEPAL by default
import ipyvuetify as v
v.theme.dark = False

btn = sw.Btn('click')
btn.set_tooltip("Built-in tooltip", bottom=True)

# Note that calling btn won't display anything
btn

# Create events
btn.on_event("click", lambda *_: print("test"))

# And to display it..
btn.with_tooltip

Note

More information can be found here.

External

The external Tooltip is a custom widget to provide easy to use tooltip in the sepal_ui framework. We are based on the Vuetify web structure so the design of the tooltip design can be surprising for users coming from different platform. Here the tooltip is the main widget, and it owns the widget it describes. Here is an example for a Btn.

from sepal_ui import sepalwidgets as sw

# correct colors for the documentation
# set to dark in SEPAL by default
import ipyvuetify as v
v.theme.dark = False

btn = sw.Btn('click')
sw.Tooltip(widget=btn, tooltip='Click over the button')

Note

More information can be found here.