Smart jQuery Tooltips with Perfect Arrow Positioning - HoverMe

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
});

4. Set the position of the tooltip using the data-position attribute:

<button 
  data-title="Tooltip Content"
  data-position="top">
  Hover Me
</button>

<button 
  data-title="Tooltip Content"
  data-position="bottom">
  Hover Me
</button>

<button 
  data-title="Tooltip Content"
  data-position="left">
  Hover Me
</button>

<button 
  data-title="Tooltip Content"
  data-position="right">
  Hover Me
</button>

5. Customize the background color & text color of the tooltip.

<button 
  data-title="Tooltip Content"
  data-color="#059669" 
  data-text-color="#fff">
  Hover Me
</button>

6. Available configuration options:

• position: Changes the tooltip's placement ('top', 'bottom', 'left', 'right').
• color: Adjusts the tooltip's background color.
• textColor: Modifies the tooltip's text color.
• borderRadius: Sets the roundness of the tooltip's corners (JS only).
• fontSize: Controls the text size inside the tooltip (JS only).
• padding: Defines the internal spacing of the tooltip (JS only).

$("[data-title]").HoverMe({
  position: 'top',
  color: '#333',
  textColor: '#fff',
  borderRadius: '4px',
  fontSize: '14px',
  padding: '6px 10px'
});

7. For dynamically created elements, implement event delegation to ensure tooltips work on content added after page load.

$(document).on('mouseenter', '.dynamic-tooltip', function() {
  if (!$(this).data('tooltip-initialized')) {
    $(this).HoverMe({
      // options here
    });
    $(this).data('tooltip-initialized', true);
    $(this).trigger('mouseenter');
  }
});

FAQs

Q: Can I customize the arrow size or shape?
A: Arrow dimensions are defined in the CSS using border properties. You can modify the .hoverme-tooltip::after styles to adjust arrow size, but the plugin expects 6px borders for proper positioning calculations.

Q: Does HoverMe support HTML content in tooltips?
A: The current implementation uses jQuery's .text() method, which strips HTML tags. For HTML content support, you would need to modify the plugin to use .html() instead, though this introduces XSS security considerations.

Q: How can I prevent tooltips on mobile devices?
A: Add media query conditions to your initialization code or CSS to disable tooltips on touch devices. You can check for touch capability using 'ontouchstart' in window before initializing HoverMe.

Q: Can multiple tooltip instances have different animation speeds?
A: Animation timing is controlled by CSS transitions in the .hoverme-tooltip class. You can create additional CSS classes with different transition durations and apply them selectively using custom initialization code.

---

This awesome jQuery plugin is developed by iamitpkumar. For more Advanced Usages, please check the demo page or visit the official website.