JavaScript Tooltip Library - Popover Control with Custom Design

Overview

The JavaScript Tooltip is a pop-up control that shows information or a message when users hover, click, focus, or touch an image, button, anchor tag, etc. The information displayed in the Tooltip can include simple text, images, hyperlinks, or custom templates.

Position and mouse trails

The JavaScript Tooltip has twelve different options to position it around the target. Also, you can configure the Tooltip to follow or not follow the mouse. To position the tip pointer, there are four options: right, left, top, and bottom.

• Tooltip in JavaScript position example
• Tooltip in JavaScript position documentation

Animation effects

The JavaScript Tooltip shows and hides animations that are completely customizable. You can include animation effect, duration, and delay. You can also control transition effects at the application level.

• Types of animation effects documentation

Custom tooltip

Using templates, the tooltip content is loaded with inline HTML, images, iframe, videos, and maps. You can also add a title to the content.

• Custom tooltip example
• Custom tooltip documentation

Show and hide

You can control show-and-hide triggers of a HTML5 Tooltip using auto, hover, click, focus, and custom modes. Implement your own custom mode to control the show and hide behaviors.

• Show and hide options documentation

Offsets

Customize the offset position of a tooltip from a target element. This offset value is defined in pixels.

• Tooltip offset position documentation

Interactivity

By default, the HTML5 Tooltip will show and hide when hovering in and out. You can stop the show and hide triggers and make the Tooltip visible always.

• Sticky mode documentation

Triggers

You can show JavaScript Tooltip on hover, click, touch, and focus on any element. It displays details about the item’s values in a tooltip.

• JavaScript Tooltip on hover, click and focus documentation

Fancy tooltip

You can completely customize the HTML5 Tooltip using CSS.

• Full customization documentation
• Tooltip height and width documentation

SVG and canvas support

JavaScript Tooltip with rich UI supports both SVG and canvas elements. Users can directly attach tooltips to <svg> or <canvas> elements to show data visualization elements.

• Tooltip on SVG and Canvas documentation

Style

Tooltip in JavaScript provides a rich set of built-in themes. It can be used to modify the control’s appearance based on user preference.

• Style documentation

JavaScript Tooltip Code Example

Easily get started with the JavaScript Tooltip (HTML5 Tooltip) using a few simple lines of HTML and TS code, as demonstrated below. Also explore our JavaScript Tooltip Example that shows you how to render and configure the Tooltip in JS.

<div style="margin: 50px;">
    <!--element which is going to render-->
    <span id='target'>Show Tooltip</span>
</div>

import { Tooltip } from '@syncfusion/ej2-popups';

// initialize tooltip component
let tooltip: Tooltip = new Tooltip({
content: 'Tooltip content'
});

// render initialized tooltip
tooltip.appendTo('#target');