#Tooltips

Only Editor panels show the tooltip text of an element. In a runtime panel, the workspace shows it:

<ui:Button text="Save" tooltip="Saves the layout. &lt;b&gt;Ctrl+S&lt;/b&gt;" />

• The tooltip shows after the pointer rests on the element for tooltip-delay milliseconds (500 by default). It shows below and to the right of the pointer, or to the left near the right edge, and stays inside the workspace.
• The tooltip also shows for the element that gets the focus from the keyboard or a gamepad, after the same delay. It shows below the element. A focus from a pointer click shows no tooltip.
• A tooltip from the focus hides when the element loses the focus, and on a key that is not a navigation key.
• When a tooltip closed less than 300 ms ago, the next tooltip shows with no delay. So the user can read the tooltips of a toolbar one after the other.
• An element without tooltip text uses the text of its nearest ancestor that has it.
• A pointer press, a key press, or a move to another element hides it. It does not show while a button is held, so drags show no tooltip.
• A shown tooltip takes the new text when the tooltip text changes and the pointer moves. Charts use this to describe the part under the pointer.
• The text is rich text. Style it with the .tb-tooltip USS class. The tooltip fades in when the workspace animations are on; it hides at once.
• Only elements inside a workspace get the tooltip. Set tooltips="false" to turn it off.

#ToolTip

A ToolTip adds a header, its own delay, and a place next to its target with an arrow:

<ui:Button name="target-button" text="Save" />
<tb:ToolTip target="target-button" header="Save" body="Saves the layout. &lt;b&gt;Ctrl+S&lt;/b&gt;" show-delay="300" placement="Below" />

var tip = new ToolTip { Header = "Save", Body = "Saves the layout.", Placement = TooltipPlacement.Right };
tip.AttachTo(saveButton);

• The element itself does not show at run time. In UI Builder, it shows a faint dashed outline over its target, with "ToolTip" and the header. With no target, the outline shows "ToolTip (no target)".
• AttachTo(element) attaches it in code, Detach() removes it and the tooltip text, and ToolTip.For(element) returns the tooltip of an element.
• A target has one ToolTip. A second one replaces the first.
• A pointer press, a key press, and a pointer that leaves the workspace hide the tooltip at once, also with a hide delay.

#Colors and your own look

The workspace has one tooltip for all targets. tooltip-class puts classes on it for one target only:

<tb:ToolTip target="delete-button" header="Delete" body="You cannot undo this." placement="Below" tooltip-class="tb-tooltip--error" />

For your own look, name a class of your style sheet. Color the arrow with the box, and set the text color on the labels:

.tb-tooltip.my-tooltip,
.tb-tooltip.my-tooltip > .tb-tooltip__arrow { background-color: rgb(46, 16, 74); border-color: rgb(255, 121, 198); }
.tb-tooltip.my-tooltip { border-radius: 12px; font-size: 14px; }
.tb-tooltip.my-tooltip > Label { color: rgb(255, 214, 240); }

The style sheet must be on the workspace or on an element above it, because the tooltip is a child of the workspace.

#Styling