There is a cool tooltip plugin created by Tekien shared on github. In this article i would like to customize it so we can use it on wordpress theme.

Features:

  • Light weight, only 3kb compressed javascript, and 4kb uncompressed 😀
  • Dynamic placement, the tooltip direction is dynamic depend on the position of the link, eg. If the link is in the right – side of the page, tooltip will automatically show in the left side.
  • No image required, tooltip arrow build using CSS
  • Fancy design, built in standard layout of the tooltip. eg. header, content and footer
  • Rich content, yes you can use any HTML tag and also image in the tooltip content
  • AJAX, content could be loaded from external source use AJAX
  • Easy, setup tooltip just in minute.
  • Cross browser, I have tested on latest Mozilla Firefox, Safari, Opera, and IE9
  • Manual close button, optionally
  • Callback, you can run callback when tooltip is loaded (opened) or closed
  • Free and Open Source, tTooltip is licensed under MIT License

The Steps
1. Download master files from github

  1. extract, then upload ttooltip folder and bootstrap.css to wordpress theme.

  2. Now, to Load javascript and css, just paste this code on header.php

<script src="<?php bloginfo('template_directory'); ?>/ttooltip/script/jquery.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/ttooltip/script/jquery-ttooltip.js"></script>

and paste this script after that above code

<script>// <![CDATA[
jQuery(document).ready(function($){
    $('.ttooltip').ttooltip({
        trigger    :'hover', /* 'hover', 'mouseenter' or 'click'*/
        followmouse: true
    });
});
// ]]></script>
  1. Now, to implement tooltip, just custumize with correct wordpress parameter.

example

<a class="ttooltip" href="#" data-title="Title sample" data-content="Content sample" data-footer="Footer sample">Basic tooltip </a>

CHANGE THESE

# <?php the_permalink(); ?>
data-title <?php the_title(); ?>
data-content <?php the_excerpt(); ?>
data-footer [Baca..]
text with href <?php the_title(); ?>
before <a class=”ttooltip” href=”#” data-title=”Title sample” data-content=”Content sample” data-footer=”Footer sample”>Basic tooltip </a>
after a class=”ttooltip” href=”<?php the_permalink(); ?>” data-title=”<?php the_title(); ?>” data-content=”<?php the_excerpt(); ?>” data-footer=”[Baca..]”><?php the_title(); ?> </a>

Try other style

 Tooltip with no footer 
Tooltip with no footer and header 
Tooltip with image
Tooltip content from AJAX

MUST Read:
jQuery Pocket Reference