Create Custom Tooltips Next To Matched Elements - funkyTooltips

A funky, cross-browser tooltip plugin for jQuery that extracts tooltip content from title or alt attribute of matched elements on hover over.

It also has the ability to display the location (e.g. URL, path to image) under the tooltip content.

How to use it:

1. Insert jQuery JavaScript library and the funkyTooltips plugin into the html file.

<link rel="stylesheet" href="src/jquery.funkytooltips.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="dist/bundle.js"></script>

2. Call the function on document ready and the plugin will loop through your content and automatically attach the custom tooltips to matched elements which have title or alt attribute.

<div class="example">
   Lorem ipsum dolor sit amet, <a href="http://www.google.com" title="This is the tooltip content">Google</a> adipiscing elit,
   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   <img src="1.jpg"
        alt="Alt">
   Ut enim ad minim veniam, quis nostrud <a href="" title="I have a title but not an href">Anchor with no href</a> exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
   Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
   Excepteur sint occaecat cupidatat <acronym title="For your information">FYI</acronym> non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
   Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
   Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

$(function(){

  $(".example").funkytooltips();

});

3. All default plugin options.

$(".example").funkytooltips({

  // default class
  cssClass: "funky-tt",

  // time to wait before showing the tooltip
  delay: 300,

  // offsets in pixels
  deltaX: 15,
  deltaY: 15,

  // displayes location information
  displayLocation: true,

  // max length
  locationLength: 30,

  // fadeIn or slideDown
  displayMethod: "basic",
  
});

4. Override the default CSS to create your own tooltip styles.

.funky-tt {
  padding: 7px 8px;
  background: #000;
  color: lime;
  position: absolute;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.funky-tt span {
  display: block;
}

.funky-tt span.location {
  font-size: 12px;
  font-family: monospace;
  color: #fff;
}

Changelog:

2021-04-17

• Updated package

---

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