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 var content = $("#tooltipContent").text(text).css({
38 position : "absolute",
39 top : event.pageY + 5,
41 border : options.border,
42 padding : options.padding,
43 background : options.background
45 timerid = setTimeout(function() {
46 content.fadeIn(options.fadein);
49 // console.log("start");
53 var tooltipHide = function(event) {
54 $("#tooltipContent").fadeOut(options.fadeout);
56 console.log("clear timeout");
57 clearTimeout(timerid);
62 // Add hover listeners.
63 $(id).mouseenter(tooltipShow).mouseleave(tooltipHide)
64 .click(tooltipHide).keydown(tooltipHide);
67 // Create the div element at the top of the body tag to hold the content of
70 $("<div>").prependTo("body").text("Initial text").attr("id",
71 "tooltipContent").hide();
74 // Called to setup client side tooltips based on the title attributes in the
77 // selector: The title attributes of these elements and their children will
79 // to generate tooltips.
80 org.wamblee.tooltip.clientside = function(selector, options) {
81 $('[title]', selector).each(
84 text = wrapped.attr('title');
85 wrapped.removeAttr('title');
86 org.wamblee.tooltip.setup(this, text, options);
91 // Called to setup server side tooltips where the server determines the text
95 // selector: Elements to apply the tooltip to.
96 // options: Mandatory options with at least the text property set.
97 org.wamblee.tooltip.serverside = function(selector, options) {
98 org.wamblee.tooltip.setup(selector, options.text, options);