ASP.NET Core Tooltip - Smart and Dynamic-Positioning Popover

Overview

The ASP.NET Core Tooltip control is a pop-up that shows information or a message when users hover, click, focus on 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 ASP.NET Core tooltip has twelve different options to position it around the target. You can configure the Tooltip to follow the mouse or not. To position the tip pointer, there are four options: Right, left, top, and bottom.

• Tooltip positions in ASP.NET Core example
• Tooltip positions in ASP.NET Core documentation

Animate Tooltip

Show or hide completely customizable animations in the ASP.NET Core Tooltip . You can include animation effect, duration, and delay. You can also control transition effects at the application level.

• Types of animation effects documentation

Templated tooltip

The tooltip content can be loaded with HTML elements, images, hyperlinks, iframe, videos, maps, etc. Users can also add a title to the content.

• HTML tooltip example
• Tooltip template documentation

Display behavior

Show or hide an ASP.NET Core Tooltip using hover, click, double-click, focus, and custom modes. Use the custom mode to show or hide a tooltip.

• Display behavior documentation

Offset position

Customize the offset position of a tooltip from a target element.

• Tooltip offset position documentation

Sticky Tooltip

Prevent the tooltip from hiding after a short duration using the sticky mode.

• Sticky mode documentation

Trigger actions

Show the ASP.NET Core Tooltip on hover, click, touch, and focus on any element.

• Show on hover, click and focus documentation

Fancy tooltip

The ASP.NET Core Tooltip can be fully customized using CSS styles.

• Full customization documentation
• Tooltip Height and width documentation

HTML5 SVG and canvas

ASP.NET Core supports both SVG and canvas elements. Users can directly attach tooltips to HTML5 <svg> or <canvas> elements to show data visualization elements.

ASP.NET Core Tooltip Code Example

Easily get started with the ASP.NET Core Tooltip using a few simple lines of HTML code example as demonstrated below. Also explore our ASP.NET Core Tooltip Example that shows you how to render and configure a Tooltip in ASP.NET Core.

<ejs-tooltip id="Tooltip" content="Lets go green & Save Earth !!!">
    <!-- Target element -->
    <e-content-template>
      <span id='target'>Show Tooltip</span>
    </e-content-template>
</ejs-tooltip>

<style>
    #Tooltip {
        position: absolute;
        left: calc( 50% - 60px);
        top: 38%;
    }
</style>