AddHint plugin

With this plugin you can display tooltips on hovering an element. You are not limited to simple texts. You can use HTML formatting even in the title attribute. Or you can generate the content by javascript and pass to the plugin. The content can be aligned to the target’s any edge, and will make sure the popup not goes off-screen.

The popup will not go away as long as you hover the mouse over it, or an input element inside has focus. Will also take care of the touch devices, where no mouse leave event exists, and will fade the popup automatically after 3 seconds (configurable).

Syntax

$(layer).addHint(content, { options });

  • content: text, html or jQuery element
options
  • gap the distance between the two elements’ edges
  • posX, posY reference point of the element to be aligned
    0 = ALIGN_LEFT | 1 = ALIGN_CENTER | 2 = ALIGN_RIGHT,
    0 = ALIGN_TOP | 1 = ALIGN_MIDDLE | 2 = ALIGN_BOTTOM
  • toX, toY reference point of the target element ( the same as above )
  • id the class name of the popup element if you wish to style it
  • css the CSS attributes array { property: ‘value’, … } which will replace the default
  • stay the length the popup should on before goes away on touch devices

Examples

sample.html
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>addHint plugin sample</title> <style> body { font:12px/1.231 Arial,Helvetica,sans-serif; } .targets a { display:inline-block; padding:1em; margin:2em; border:1px solid #ccc; text-align:center; text-decoration:none; } </style> </head> <body> <div class="targets"> <a href="javascript:void(0)" title="The target's title attribute holds the hint. Placed below automatically if don't fit in above.">Move over this</a> <a href="javascript:void(0)">... or this</a> <a href="javascript:void(0)">... or this</a> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1"></script> <script src="addhint.js"></script> <script> $(document).ready(function() { $('.targets > a:first').addHint(); $('.targets > a:nth(1)').addHint('Simple <b>HTML</b> code'); var el = $('<div>').text('a jQuery element').css({ display:'inline-block', backgroundColor:'#066', color:'#fff', padding:'1em' }).hide().appendTo('body'); $('.targets > a:last').addHint(el, { posX: ALIGN_LEFT, posY: ALIGN_MIDDLE, toX: ALIGN_RIGHT, toY: ALIGN_MIDDLE, gap: 0 }); }); </script> </body> </html>

Requirements

jQuery 1.7 or higher

License

Available for use in all personal or commercial projects under both MIT and GPL licenses.

Copyright (c) 2012 Laszlo Molnar

Leave a Reply