• Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark
  • Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • High Contrast
Theme Selection
Mode Selection
*Translated by Google Translator.

Example of Smart Positioning in ASP.NET MVC Tooltip Control

This sample demonstrates the smart positioning functionalities of the Tooltip which will open by dragging the picture.


This sample shows the dynamic adjustment of the tooltip position within the specified Viewport. Start dragging the ant image, so that the tooltip opens up immediately and keeps moving along with the target image. When the image reaches the corners of the sample container on dragging, the tooltip and its arrow position will be auto adjusted to make it look fit within the sample container area.

In this sample, the tooltip is opened manually by using its open method on drag start of the target image. On further dragging, the refresh method of the tooltip needs to be called to reposition it continuously and on drag stop, the tooltip will be hidden by using it’s close method.

More information on dynamic positioning of the tooltip can be found in the documentation section.

Transform your ASP.NET MVC web apps today with Syncfusion ASP.NET MVC components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing