Custom Tooltip Follows Mouse Cursor - jQuery YACSSTooltip

Custom Tooltip Follows Mouse Cursor - jQuery YACSSTooltip
File Size: 31.6 KB
Views Total: 1607
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Yet another jQuery tooltip plugin to create tooltip overlays using alt or title attributes that always follow the cursor on mouse move.

How to use it:

1. Insert the JavaScript file jquery.YACSSTooltip.min.js after jQuery library before you close the body tag.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/src/jquery.YACSSTooltip.js"></script>

2. Define the tooltip content in the alt or title attributes.

<img alt="Tooltip Content Here" 
     src="1.jpg"
>

3. Attach the plugin to the img tag and done.

$(function() {
  $('img').addTooltip();
});

4. Override the default tooltip styles in the CSS.

.YACSSTooltip {
  border: 1px solid #333; 
  background-color: #161616; 
  border-radius: 5px; 
  padding: 5px 0; 
  color: #fff; 
  font-size: 12px Arial;
  max-width: 250px;
  line-break: auto;
  word-break: normal;
  word-spacing: 0px;
  white-space: normal;
  text-align: center;
  verflow-wrap: normal;
}

Changelog:

2019-10-02

  • Fix word-wrapping style for URLs or very long words in the tooltip

2019-09-20

  • Fix word-break style for URLs or very long words in the tooltip

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