LogoLogo
HomeNewsSupportVideos
  • Introduction
  • Getting Started
  • What's new in 4.0
    • Known Issues
    • .NET Core Designer
    • Managed Graphics
    • Fluent Markup
    • Markdown Support
    • Upgrade from 3.x
  • Releases
    • What's new in 4.0
    • What's new in 3.5
    • What's new in 3.2
      • View Builder
      • Validation Rules
      • Enhanced Font Support
      • Design-Time Debug
    • What's new in 3.1
    • What's new in 3.0
      • FAQs
      • Update Existing Projects
      • Multi Targeting
      • Visual Studio Designer
      • Referencing Assemblies
      • Docker Support
      • Troubleshooting
      • Deployment
    • What's new in 2.5
    • What's new in 2.2
    • What's new in 2.1
    • What's new in 2.0
    • Upgrade from 1.x
  • Getting Started
    • New Project
    • Templates
    • Troubleshooting
    • License Activation
    • FAQ
    • API
    • Hybrid
    • Deployment
    • Theme Builder
  • Concepts
    • Startup
    • Configuration
    • Load Balancing
    • Designer
    • Layouts
    • Client Profiles
    • Tab Order
    • Compression
    • Embedded Resources
    • Modal Workflow
    • Localization
    • RightToLeft
    • Background Tasks
    • Real Time Web Applications
    • JavaScript
    • JavaScript Object Model
    • Security
    • Synchronization
    • Session Management
    • Theming
    • Dependency Injection
    • Application Switches
    • Visual Studio Code
  • Controls & Components
    • General
      • Application
      • AutoSizing
      • AutoScroll
      • AutoScaling
      • Accessibility
      • Colors & Fonts
      • Embedded Tools
      • Events
      • Touch Events
      • Images
      • Labels
      • ToolTips
      • Data Binding
      • Common Properties
      • Custom Painting
      • Move & Resize
      • Drag & Drop
      • Validation
      • User Data
      • Responsive Properties
      • VB.NET Extensions
    • Common Dialogs
      • FolderBrowserDialog
      • ColorDialog
      • OpenFileDialog
      • SaveFileDialog
    • Editors
      • TextBox
        • TagTextBox
        • MaskedTextBox
        • TypedTextBox
      • DateTimePicker
      • MonthCalendar
      • TimeUpDown
      • DomainUpDown
      • NumericUpDown
      • TrackBar
    • Buttons
      • Button
      • SplitButton
      • CheckBox
      • RadioButton
    • Containers
      • Page
      • Form
      • Desktop
      • Panel
      • FlexLayoutPanel
      • FlowLayoutPanel
      • TableLayoutPanel
      • GroupBox
      • Accordion
      • TabControl
      • UserPopup
      • UserControl
      • ToolBar
      • StatusBar
      • SplitContainer
      • SlideBar
    • Lists & Grids
      • ComboBox
        • UserComboBox
        • TreeViewComboBox
        • ListViewComboBox
      • ListBox
        • CheckedListBox
      • TreeView
      • ListView
      • DataGridView
        • Column
        • TextBoxColumn
        • ButtonColumn
        • LinkColumn
        • ImageColumn
        • MaskedTextBoxColumn
        • DateTimePickerColumn
        • NumericUpDownColumn
        • CheckBoxColumn
        • ComboBoxColumn
      • DataRepeater
      • PropertyGrid
    • Extenders
      • Animation
      • ToolTip
      • ErrorProvider
      • Rotation
      • StyleSheet
      • JavaScript
    • Media
      • Audio
      • Video
      • FlashPlayer
    • Content
      • Label
      • LinkLabel
      • PictureBox
      • ScrollBars
      • Upload
      • AspNetPanel
      • ImageList
      • PdfViewer
      • ProgressBar
      • Spacer
      • Widget
      • WebBrowser
      • IFramePanel
      • HtmlPanel
      • Canvas
      • Shape
      • Line
    • Menus
      • MainMenu
      • MenuBar
      • MenuItem
      • LinkMenuItem
      • ContextMenu
    • Notifications
      • AlertBox
      • MessageBox
      • Toast
    • Other Components
      • Timer
      • BindingSource
      • BindingNavigator
      • DataSet
      • EventLog
      • MessageQueue
      • PerformanceCounter
Powered by GitBook
On this page
  • Features
  • Styling
  • Error ToolTip
  • Data Binding
  • Advanced
  • Configuration
  • JavaScript Widget

Was this helpful?

Export as PDF
  1. Controls & Components
  2. General

ToolTips

Tooltip concepts.

PreviousLabelsNextData Binding

Last updated 4 months ago

Was this helpful?

All Wisej.NET controls can be associated to a tooltip text through the ToolTipText property or the .

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.

Features

Styling

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.

Advanced

Configuration

JavaScript Widget

Class name
wisej.web.extender.ToolTip

Theme appearance

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

Check out also the for a different kind of "tooltips".

Both tooltips can be styled in a custom theme or theme mixin, or using the on the top level container.

The ToolTip property provided by the is not bindable.

You can control several aspects of the tooltip widget using the 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.

"tooltip" and "tooltip-error" see .

​​

HelpTip Extender
ToolTip extender
ToolTip Extender
ToolTip extender
Themes
https://github.com/iceteagroup/wisej-js
ToolTip extender