A jQuery Plugin for Creating Funky Tooltips | funkyTooltips

Funkytooltips is a jQuery plugin for generating/creating tooltips based on data in HTML tags. A funky cross-browser tooltips plugin for jQuery that extracts ToolTip content from the title or alternate attribute of matching elements when hovered over.

It also has the ability to display the website (such as URL, the path to image) within the tooltip content.

custom tooltip example, add tooltip to span using jquery, add tooltip using javascript, tooltip model, responsive tooltip, jquery powertip cdn

How to make use of it:

1. Insert the 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 doc ready and the plugin will loop by way of your content material and routinely attach the customized tooltips to matched components that have title or alt attribute.

<div class="example">
   Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   <img src=" "
        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 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 choices.

$(".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 individual 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;
}

Create Custom Tooltips Next To Matched Elements, Funkytooltips Plugin/Github, cordova tooltip, jquery tooltip popup on click