0

Description

"Ever wanted a custom tooltip other than raw text ?\r\nThe following allows you creating your own advanced tooltip using a `Popup` and a `Control`.\r\nThe `Popup` acts as the tooltip itself. The `Control` **MUST** be a child of the pop-up (ideally, the only child, possibly contained by a `MarginContainer`).\r\nWe use `Control` over `CanvasItem` to be able to control sizing\/layout etc.\r\n\r\n## Set-up\r\n\r\nAttach the following script to a `Node` in your scene, or copy\/paste and adapt the code directly in the script of your choice.\r\n\r\n## Parameters\r\n\r\nExported variables are:\r\n* **time_to_preview** : The time required to stay over the triggering control to display the tooltip (in seconds).\r\n* **preview_indicator** : The UI element that will inspect mouse hovering and trigger the pop-up showing\/hiding.\r\n* **preview_popup** : The pop-up to show\/hide that contains the tooltip to draw.\r\n* **preview_rect** : The pop-up content.\r\n\r\n## Behavior\r\n\r\nUpon mouse hovering on the specified UI element, the pop-up appears. If the mouse leaves the said UI element, the pop-up is hidden.\r\nWhen the pop-up is shown, a redraw is required. The function `_on_preview_draw` will be called and you'll be in charge to draw whatever you want.\r\n\r\n> [!CAUTION]\r\n> In the `_on_preview_draw`, be careful to call `draw_*` functions of the `preview_rect` object ! It's this `CanvasItem` that is meant to redrawn."

Main code

extends Node

# Time to wait before seeing preview (in seconds)
@export var time_to_preview : float = 0.3

@export var preview_indicator : Control
@export var preview_popup : Popup
@export var preview_rect : Control

@onready var mouse_in : bool = false
@onready var time_in : float = 0.

func _ready() -> void:
	preview_indicator.mouse_entered.connect(func () -> void: mouse_in = true; time_in = 0.)
	preview_indicator.mouse_exited.connect(func() -> void: mouse_in = false; preview_popup.hide())
	preview_rect.draw.connect(_on_preview_draw)

func _on_preview_draw() -> void:
	pass # Draw your custom tooltip here.

func _process(delta : float) -> void:
	if mouse_in:
		time_in += delta
		if time_in > time_to_preview:
			preview_popup.position = get_viewport().get_mouse_position()
			# COMPUTE TOOLTIP SIZE HERE and not in the Drawing function
			preview_popup.show()
			mouse_in = false

Comments