Tooltip

View source
ceramic.Entity → ceramic.Visual → elements.Tooltip (Class)
Implements: tracker.Observable, ceramic.Component

A tooltip component that displays informational text when hovering over visual elements.

This class provides a tooltip implementation that can be attached to any visual element as a component. The tooltip displays text content in a styled bubble with a pointer triangle, appearing on hover and disappearing when the pointer leaves the element.

Features

  • Automatic positioning relative to the target element
  • Theme-based styling with customizable appearance
  • Speech bubble design with pointer triangle
  • Hover-based show/hide behavior
  • Component-based attachment system

Usage Examples 

// Add a tooltip to any visual element
var button = new Button();
Tooltip.tooltip(button, "Click me to save your work");

// Update tooltip content
Tooltip.tooltip(button, "Updated tooltip text");

// Remove tooltip
Tooltip.tooltip(button, null);

// Create tooltip manually
var myTooltip = new Tooltip("Custom tooltip content");
someVisual.component('tooltip', myTooltip);
See: Component, Theme, Visual

Static Members

elements
tooltip(visual: ceramic.Visual, content: String): Void

Adds, updates, or removes a tooltip from a visual element.

This static method provides a convenient way to manage tooltips on visual elements. It automatically creates, updates, or removes tooltip components as needed.

Name Type Description
visual ceramic.Visual The visual element to attach the tooltip to
content String The tooltip text to display, or null to remove the tooltip * ## Examples haxe // Add a tooltip Tooltip.tooltip(myButton, "Click to save"); * // Update tooltip content Tooltip.tooltip(myButton, "Click to save (Ctrl+S)"); * // Remove tooltip Tooltip.tooltip(myButton, null);

Instance Members

elements
observedDirty: Bool

Default is false, automatically set to true when any of this instance's observable variables has changed.

elements
theme: Theme

The theme used for styling this tooltip. If null, the context's default theme will be used.

elements
content: String

The text content displayed in the tooltip. This is the main message shown to the user.

elements
entity: ceramic.Visual

The visual element this tooltip is attached to. @private

elements
initializerName: String
elements
invalidateTheme(): Void
elements
invalidateContent(): Void
elements
new(content: String): Void

Creates a new tooltip with the specified content.

The tooltip is automatically added to the context view with high depth to ensure it appears above other UI elements. The visual structure includes a background bubble, pointer triangle, and text content.

Name Type Description
content String The text content to display in the tooltip

Private Members

elements
unobservedTheme: Theme
elements
unobservedContent: String
elements
text: ceramic.Text

The text visual that displays the tooltip content. @private

elements
bubble: ceramic.Quad

The background bubble quad for the tooltip. @private

elements
bubbleTriangle: ceramic.Triangle

The triangle pointer that points to the target element. @private

elements
emitObservedDirty(instance: Tooltip, fromSerializedField: Bool): Void

Event when any observable value as changed on this instance.

Name Type
instance Tooltip
fromSerializedField Bool
elements
emitThemeChange(current: Theme, previous: Theme): Void

Event when theme field changes.

Name Type
current Theme
previous Theme
elements
emitContentChange(current: String, previous: String): Void

Event when content field changes.

Name Type
current String
previous String
elements
bindAsComponent(): Void

Binds this tooltip as a component to its entity.

Sets up the hover behavior for showing and hiding the tooltip. The tooltip appears when the pointer enters the entity and disappears when it leaves. Positioning is automatically calculated relative to the entity's center.

@private

elements
updateTextContent(): Void

Updates the layout and positioning based on the current text content.

Recalculates the size and positions of all visual elements (text, bubble, triangle) to accommodate the current content. The tooltip is automatically sized to fit the text with appropriate padding.

@private

elements
updateStyle(): Void

Updates the visual styling of the tooltip based on the current theme.

Applies theme colors and fonts to all visual elements. If no custom theme is set, uses the context's default theme. The bubble and triangle use overlay colors with appropriate alpha values.

@private

elements
setEntity(entity: ceramic.Entity): Void
Name Type
entity ceramic.Entity
elements
getEntity(): ceramic.Entity
Returns
ceramic.Entity

Metadata

Name Parameters
:build tracker.macros.ObservableMacro.build()
:autoBuild tracker.macros.ObservableMacro.build()
:build ceramic.macros.ComponentMacro.build()
:autoBuild ceramic.macros.ComponentMacro.build()
:build tracker.macros.EventsMacro.build()
:autoBuild tracker.macros.EventsMacro.build()
:build ceramic.macros.EntityMacro.buildForCompletion()
:autoBuild ceramic.macros.EntityMacro.buildForCompletion()