The tooltip control is used to display a pop-up that contains some information or message when you hover, click, focus, or touch an element. The information displayed in the tooltip can include simple text, images, hyperlinks, or custom templates.
Only a message and target element are required to configure the default tooltip. It will work out of the box. However, it provides many options for updating the position and animation, as well as customizing the appearance.
The tooltip responds to screen size and adapts its contents to fit any device. It recognizes touch gestures, displays the message when a touch and hold action is performed, and hides after a delay of 1500 ms. This provides the best user experience for phones, tablets, and desktops.
The tooltip can be positioned to 12 different locations around the target. Tooltip can be configured to follow or not follow the mouse. Four similar options are available for positioning the tip pointer.
The tooltip intelligently positions the content and its arrows in the best location to fit the view port or container.
Through templates, tooltip content can be loaded with inline HTML, images, iframe, videos, and maps. A title can be added to the content.
Load dynamic content on demand using an AJAX callback if content is not finalized during tooltip creation.
Control when the tooltip should appear and when it should be hidden using the available auto, hover, click, focus, and custom modes. You can also implement your own custom mode to control the tooltip show and hide behavior.
Supports both SVG and canvas elements. Users can directly attach to <svg> or <canvas> elements to show tooltips on data visualization elements.
The tooltip show and hide animations are completely customizable, including the animation effect, duration, and delay. Transition effects can be controlled at the application level.
The tooltip can be completely altered using CSS.
Fully supports WAI-ARIA accessibility to make it accessible to screen readers and assistive devices.
UI element visuals such as foreground color, background color, line spacing, text, and images are designed based on the WCAG 2.0 standard.
Follows WAI-ARIA best practices for implementing keyboard interaction.
You have control over all UI elements and behaviors of the tooltip to provide the best experience to your end users through a rich set of developer friendly APIs.