3 org.wamblee.tooltip = org.wamblee.tooltip || {};
5 // Generic tooltip setup functions.
6 // There is a default style for the tooltip which can be overriden using
7 // regular CSS for #tooltipContent. This concerns the border, padding,
8 // and background attributes. Use !important in the CSS to override these
9 // styles as these are inline styles.
11 // setup the tooltip for a set of elements (usually only one).
13 // id: selector identifying the element(s)
15 // options: optional options for the tooltip.
17 // delay: Delay in millieconds before the tooltip shows
18 // fadein: Time in ms to fade in
19 // fadeout: Time in ms to fade out
20 // border: Border CSS style
21 // padding: Padding CSS style
22 // background: Background CSS style.
23 org.wamblee.tooltip.setup = function(id, text, options) {
26 var options = $.extend({
30 border : "1px solid black",
31 padding : "0.2em 0.5em 0.2em 0.5em",
33 }, org.wamblee.removeNulls(options) );
36 var tooltipShow = function(event) {
37 timerid = setTimeout(function() {
38 content.fadeIn(options.fadein);
40 var content = $("#tooltipContent").text(text).css({
41 position : "absolute",
42 top : event.pageY + 5,
44 border : options.border,
45 padding : options.padding,
46 background : options.background
48 // console.log("start");
52 var tooltipHide = function(event) {
54 console.log("clear timeout");
55 clearTimeout(timerid);
58 $("#tooltipContent").fadeOut(options.fadeout);
61 // Add hover listeners.
62 $(id).mouseenter(tooltipShow).mouseleave(tooltipHide)
63 .click(tooltipHide).keydown(tooltipHide);
66 // Create the div element at the top of the body tag to hold the content of
69 $("<div>").prependTo("body").text("Initial text").attr("id",
70 "tooltipContent").hide();
73 // Called to setup client side tooltips based on the title attributes in the
76 // selector: The title attributes of these elements and their children will
78 // to generate tooltips.
79 org.wamblee.tooltip.clientside = function(selector, options) {
80 $('[title]', selector).each(
83 text = wrapped.attr('title');
84 wrapped.removeAttr('title');
85 org.wamblee.tooltip.setup(this, text, options);
90 // Called to setup server side tooltips where the server determines the text
94 // selector: Elements to apply the tooltip to.
95 // options: Mandatory options with at least the text property set.
96 org.wamblee.tooltip.serverside = function(selector, options) {
97 org.wamblee.tooltip.setup(selector, options.text, options);