Custom Tooltip Follows Mouse Cursor - jQuery YACSSTooltip

Custom Tooltip Follows Mouse Cursor - jQuery YACSSTooltip

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

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

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="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;
}

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

  • Publication date: 07.12.2018
  • Source