Tooltip
Last updated
Was this helpful?
Last updated
Was this helpful?
Tooltip widget in Supervisely is a user interface element that displays prompt information for mouse hover. Uses like a wrapper around a main UI elements, such as Button for example.
text
Union[str, List[str]]
Tooltip text. For a multi-line view, use List[str] with each line as a value in the list
content
Widget
Widget of the UI element for which the tooltip will be displayed
color_theme
Literal["dark", "light"]
One of "dark", "light" color theme
placement
Literal["top","top-start", ...]
One of "top","top-start","top-end","bottom","bottom-start","bottom-end","left","left-start","left-end","right","right-start","right-end" - place around the element where tooltip will be displayed
offset
int
Offset of the tooltip in pixels
transition
Literal["el-fade-in-linear","el-fade-in"]
One of "el-fade-in-linear", "el-fade-in" describes the disappearance animation for widget
visible_arrow
bool
Determines whether the tooltip should have an arrow pointing to the item or not
open_delay
int
Display delay in milliseconds
enterable
bool
Determines whether the cursor can enter the tooltip area or not
hide_after
int
Hide delay in milliseconds. With the default value 0, it will not be hidden as long as the mouse is inside the UI element.
widget_id
str
ID of the widget
Tooltip text. For a multi-line view, use List[str] with each line as a value in the list
type: Union[str, List[str]]
Example with ['Tooltip text line 1', 'Tooltip text line 2'] :
The UI element for which the tooltip will be displayed.
type: Widget
Color theme of Tooltip widget.
type: Literal["dark", "light"]
default value: "dark"
Place around the element where tooltip will be displayed. Must be one of "top","top-start","top-end","bottom","bottom-start","bottom-end","left","left-start","left-end","right","right-start","right-end" values.
type: Literal["top","top-start", ...]
default value: "bottom"
Offset of the Tooltip in pixels.
type: int
default value: 0
Describes the disappearance animation for widget. Must be one of "el-fade-in-linear", "el-fade-in" values.
type: Literal["el-fade-in-linear","el-fade-in"]
default value: "el-fade-in-linear"
Determines whether the tooltip should have an arrow pointing to the item or not.
type: bool
default value: True
Example with False :
Display delay in milliseconds.
type: int
default value: 0
Example with 2000 value:
Determines whether the cursor can enter the tooltip area or not.
type: bool
default value: True
Hide delay in milliseconds. With the default value, it will not be hidden as long as the mouse is inside the UI element.
type: int
default value: 0
Example with 2000 value:
ID of the widget.
type: str
default value: None
set_text(text: Union[str, List[str]])
Set text for tooltip. For a multi-line text, use List[str] with each line as a value in the list
set_placement(placement: Literal["top","top-start","top-end","bottom","bottom-start","bottom-end","left","left-start","left-end","right","right-start","right-end"])
Set place around the element where tooltip will be displayed
set_offset(offset: int)
Set offset of the tooltip in pixels
set_transition(transition: Literal["el-fade-in-linear", "el-fade-in"])
Set animation for widget disappearance
set_arrow_visibility(visible_arrow: bool)
Switch off or on the tooltip arrow pointing to the item
set_open_delay(open_delay: int)
Set the display delay in milliseconds
set_hide_after(hide_after: int)
Set the disappearance delay in milliseconds
You can find this example in our GitHub repository:
First, we load environment variables with credentials and init API for communicating with Supervisely Instance:
Main widget for application Button, and interactive widget Tooltip that will display additional information for the main widget.
Prepare a layout for app using Card widget with the content parameter and place widget that we've just created in the Container widget.
Create an app object with layout parameter.