HoverMe provides animated, customizable tooltips for jQuery with automatic arrow positioning that targets the center of hovered elements regardless of size. The plugin supports four tooltip placements: top, bottom, left, and right, and allows per-element configuration via data attributes. CSS transitions enable smooth fade-in and fade-out animations with adjustable timing. Responsive behavior prevents tooltips from overflowing viewport boundaries and maintains functionality across screen sizes. Full color customization covers background, text, and arrow styling. Initialization uses a selector for elements with data-title and a call to .HoverMe() with optional configuration.
HoverMe is a lightweight jQuery plugin for creating animated, customizable tooltips with smart arrow positioning. It automatically calculates arrow placement to point directly at the center of hovered elements, regardless of tooltip size or element dimensions. More Features: Four Position Options: Support for top, bottom, left, and right tooltip placement. Data Attribute Configuration: Override global settings on individual elements using HTML data attributes. CSS Transition Animations: Smooth fade-in and fade-out effects with customizable timing.
Responsive Design: Handles viewport boundaries and maintains functionality across screen sizes. Color Customization: Full control over background colors, text colors, and arrow styling. How To Use It: 1. Download and load the jQuery HoverMe plugin's files in your project which has the latest jQuery library included. <link rel="stylesheet" href="hoverMe.css"> <script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="hoverMe.js"></script> 2. Add a data-title attribute to any element you want a tooltip on. This attribute contains the text for the tooltip. <button data-title="Tooltip Content"> Hover Me </button> 3. Select the elements with data-title and call the .HoverMe() method. $("[data-title]").HoverMe({ // options here });
Collection
[
|
...
]