ToolTips
Tooltip concepts.
All Wisej controls can be associated to a tooltip text through the ToolTipText property or the ToolTip extender.
Tooltips can be assigned to controls and to child elements of controls. i.e. TreeNode, ListView or ComboBox items, TabPage, DataGridView Cells, ListView items, etc.
When a control can display a tooltip in relation of a child element, it usually exposes the ShowToolTips or ShowNodeToolTips or ShowCellToolTips property. See the documentation for each control for more details.
Check out also the HelpTip Extender for a different kind of "tooltips".
Features
Styling
Both tooltips can be styled in a custom theme or theme mixin, or using the ToolTip extender on the top level container.
In the theme you can control any aspect of the tooltip widget, just like any other widget, plus additional properties that control the location and alignment of the tooltip:
offset [offsetTop, offsetRight, offsetBottom, offsetLeft]: Adds the specified distance in pixels between the tooltip widget and the target widget.
placeMethod: indicates whether to place the tooltip in relation to the target widget or the current position of the pointer; values are "widget", "pointer".
placementModeX and placementModeY: indicate how to calculate the placement of the tooltip when the preferred position doesn't fit in the browser; values are:
"direct" to preserve the calculated position even if it doesn't fit in the browser.
"keep-align" to adjust the position to fit in the browser, i.e. "bottom-center" may become "top-center".
"best-fit" to preserve the preferred position but offsetting the tooltip enough pixels to fit in the browser.
position: indicates where to place the tooltip in relation to the target widget; values are "top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right", "left-top", "left-middle", "left-bottom", "right-top", "right-middle", "right-bottom"
states: indicates the placement of the tooltip in relation to the target widget; values are "p_lacementLeft"_, "placementRight", "placementAbove", "placementBelow" .
Error ToolTip
There are two kinds of tooltips in Wisej: the regular tooltip that is shown when the pointer rests for a certain amount of time over a control or an element of a control, and the error tooltip that is shown when the pointer rests over an "invalid" control.
All controls that expose the InvalidMessage (available in the designer) and Invalid (only available in code) properties. You can set the Invalid property by code simply by assigning it, otherwise it is set to true or cleared when the control is validated.
Data Binding
The ToolTipText property can be bound to a data source like any other bindable property.
The ToolTip property provided by the ToolTip Extender is not bindable.
Advanced
Configuration
You can control several aspects of the tooltip widget using the ToolTip extender and setting the properties on the component. All the settings set on the Tooltip extender, except the ToolTipIcon and ToolTipIconSource, also apply to the ToolTipText property when the ToolTip extender is present on the same container.
JavaScript Widget
| Class name | wisej.web.extender.ToolTip |
|---|---|
Theme appearance | "tooltip" and "tooltip-error" see Themes. |
Child components | "atom" is the inner widget that shows an "icon" and a "label"; "arrow" is the widget that is attached to one of the 4 sides of the tooltip according to the placement. |
Source code |
Last updated
