Canvas Tooltip

...or is it?

Canvas Tooltips allows you to enhance your web page with stunning tooltips. These tooltips are created by drawing on a canvas element. Because the tooltips are drawn using canvas we can make them look great across browsers without having to use images or extra markup.

You have full control over the look and feel of your tooltips. Take a look at the docs to see exactly what you can do, or check out the examples below.

Canvas Tooltips is written as a jQuery extension. A single line of code will get you started: $('.selector').canvasTooltip();. It only takes a few more lines of code to get your tooltip looking exactly the way you want.

Just noticed that this page is showing up in search results now. The library isn't quite ready for release just yet, but we're getting there. I'll work on getting this front page finished and also on finishing up the missing functionality I'm planning for the initial release. Over the next week or so (8/7/12).

Update (8/23/12): Procrastinating...
Update (1/21/14): It's been a while. Finally got around to updating things. Tooltips are now not stored in the DOM tree, instead they are attached as data to the target elements.
Update (5/24/15): Another year and I've still done nothing with this. Have I abandoned it yet? I'm not sure. By the way, this is me!
{
  "background": {
    "color": [
      { "stop": 0, "color": "#ffffff" },
      { "stop": 1, "color": "#e8e8e8" }
    ],
    "opacity": 1,
    "radius": {
      "bottomLeft": 3,
      "bottomRight": 3,
      "topLeft": 3,
      "topRight": 3
    }
  },
  "border": {
    "color": "#888888",
    "opacity": 1,
    "radius": {
      "bottomLeft": 3,
      "bottomRight": 3,
      "topLeft": 3,
      "topRight": 3
    },
    "size": 1
  },
  "shadow": {
    "blur": 1,
    "color": "#333333",
    "offset": {
      "x": 3,
      "y": 3 
    },
    "opacity":0.25
  },
  "stem": {
    "height": 5,
    "point": "middle",
    "width": 10
  }
}
bottomleft topleft 0 0 element
{
  "background": {
    "color": "#FF0033",
    "opacity": 1,
    "radius": {
      "bottomLeft": 5,
      "bottomRight": 5,
      "topLeft": 5,
      "topRight": 5
    }
  },
  "border": {
    "color": "#000000",
    "opacity": 1,
    "radius": {
      "bottomLeft": 5,
      "bottomRight": 5,
      "topLeft": 5,
      "topRight": 5
    },
    "size": 1
  },
  "shadow": {
    "blur": 1,
    "color": "#888888",
    "offset": {
      "x": 3,
      "y": 3 
    },
    "opacity":0.3
  },
  "stem": {
    "height": 5,
    "point": "middle",
    "width": 10
  }
}
bottomleft topleft 0 0 element
{
  "background": {
    "color": [
      { "stop": 0, "color": "#5dc6f2" },
      { "stop": 1, "color": "#1af490" }
    ],
    "opacity": 1,
    "radius": {
      "bottomLeft": 5,
      "bottomRight": 5,
      "topLeft": 5,
      "topRight": 5
    }
  },
  "border": {
    "color": [
      { "stop": 1, "color": "#3ba4d0" },
      { "stop": 0, "color": "#08d270" }
    ],
    "opacity": 1,
    "radius": {
      "bottomLeft": 5,
      "bottomRight": 5,
      "topLeft": 5,
      "topRight": 5
    },
    "size": 3
  },
  "shadow": {
    "blur": 1,
    "color": "#1af490",
    "offset": {
      "x": 5,
      "y": 5 
    },
    "opacity":0.4
  },
  "stem": {
    "height": 5,
    "point": "middle",
    "width": 10
  }
}
bottomleft topleft 0 0 element
{
  "background": {
    "color": [
      { "stop": 0, "color": "#853D5A" },
      { "stop": 1, "color": "#F514D7" }
    ],
    "opacity": 1,
    "radius": {
      "bottomLeft": 3,
      "bottomRight": 3,
      "topLeft": 3,
      "topRight": 3
    }
  },
  "border": {
    "color": "#888888",
    "opacity": 1,
    "radius": {
      "bottomLeft": 3,
      "bottomRight": 3,
      "topLeft": 3,
      "topRight": 3
    },
    "size": 1
  },
  "shadow": {
    "blur": 1,
    "color": "#333333",
    "offset": {
      "x": 3,
      "y": 3 
    },
    "opacity":0.25
  },
  "stem": {
    "height": 5,
    "point": "middle",
    "width": 10
  }
}
bottomleft topleft 0 0 element
{
  "background": {
    "color": [
      { "stop": 0, "color": "#F5CC14" },
      { "stop": 1, "color": "#4F3B24" }
    ],
    "opacity": 1,
    "radius": {
      "bottomLeft": 3,
      "bottomRight": 3,
      "topLeft": 3,
      "topRight": 3
    }
  },
  "border": {
    "color": "#888888",
    "opacity": 1,
    "radius": {
      "bottomLeft": 3,
      "bottomRight": 3,
      "topLeft": 3,
      "topRight": 3
    },
    "size": 1
  },
  "shadow": {
    "blur": 1,
    "color": "#333333",
    "offset": {
      "x": 3,
      "y": 3 
    },
    "opacity":0.25
  },
  "stem": {
    "height": 5,
    "point": "middle",
    "width": 10
  }
}
bottomleft topleft 0 0 element
{
  "background": {
    "color": [
      { "stop": 0, "color": "#7882F0" },
      { "stop": 1, "color": "#5884A3" }
    ],
    "opacity": 1,
    "radius": {
      "bottomLeft": 3,
      "bottomRight": 3,
      "topLeft": 3,
      "topRight": 3
    }
  },
  "border": {
    "color": "#888888",
    "opacity": 1,
    "radius": {
      "bottomLeft": 3,
      "bottomRight": 3,
      "topLeft": 3,
      "topRight": 3
    },
    "size": 1
  },
  "shadow": {
    "blur": 1,
    "color": "#333333",
    "offset": {
      "x": 3,
      "y": 3 
    },
    "opacity":0.25
  },
  "stem": {
    "height": 5,
    "point": "middle",
    "width": 10
  }
}
bottomleft topleft 0 0 element
{
  "background": {
    "color": [
      { "stop": 0, "color": "#CABFDE" },
      { "stop": 0.15, "color": "#94063A" },
      { "stop": 0.30, "color": "#4FC2C0" },
      { "stop": 1, "color": "#257371" }
    ],
    "opacity": 1,
    "radius": {
      "bottomLeft": 3,
      "bottomRight": 3,
      "topLeft": 3,
      "topRight": 3
    }
  },
  "border": {
    "color": "#888888",
    "opacity": 1,
    "radius": {
      "bottomLeft": 3,
      "bottomRight": 3,
      "topLeft": 3,
      "topRight": 3
    },
    "size": 1
  },
  "shadow": {
    "blur": 1,
    "color": "#333333",
    "offset": {
      "x": 3,
      "y": 3 
    },
    "opacity":0.25
  },
  "stem": {
    "height": 5,
    "point": "middle",
    "width": 10
  }
}
bottomleft topleft 0 0 element
{
  "background": {
    "color": "#000000",
    "opacity": 1,
    "radius": {
      "bottomLeft": 10,
      "bottomRight": 10,
      "topLeft": 0,
      "topRight": 0
    }
  },
  "border": {
    "color": "#888888",
    "opacity": 1,
    "radius": {
      "bottomLeft": 10,
      "bottomRight": 10,
      "topLeft": 0,
      "topRight": 0
    },
    "size": 1
  },
  "shadow": false,
  "stem": {
    "height": 5,
    "point": "middle",
    "width": 10
  }
}
topmiddle bottomright 0 0 element headerSpecial
{
  "background": {
    "color": "#99ffff",
    "opacity": 0.5,
    "radius": {
      "bottomLeft": 6,
      "bottomRight": 6,
      "topLeft": 6,
      "topRight": 6
    }
  },
  "border": {
    "color": "#cc99ff",
    "opacity": 1,
    "radius": {
      "bottomLeft": 6,
      "bottomRight": 6,
      "topLeft": 6,
      "topRight": 6
    },
    "size": 1
  },
  "shadow": false,
  "stem": {
    "height": 5,
    "point": "middle",
    "width": 10
  }
}
rightmiddle lefttop 0 0 mouse mousemove
{
  "background": {
    "color": [
      {"color": "#66ff66", "stop": 1},
      {"color": "#ffffff", "stop": 0}
    ],
    "opacity": 1,
    "radius": {
      "bottomLeft": 10,
      "bottomRight": 0,
      "topLeft": 0,
      "topRight": 5
    }
  },
  "border": {
    "color": "#888888",
    "opacity": 0.8,
    "radius": {
      "bottomLeft": 0,
      "bottomRight": 10,
      "topLeft": 5,
      "topRight": 0
    },
    "size": 10
  },
  "shadow": {
    "blur": 1,
    "color": "#999999",
    "offset": {
      "x": 5,
      "y": 5
    },
    "opacity": 0.5
  },
  "stem": {
    "height": 5,
    "point": "middle",
    "width": 10
  }
}
bottommiddle topmiddle 0 0 element #targetTest
{
  "background": {
    "color": [
      {"color": "#ffffff", "stop": 0},
      {"color": "#3366cc", "stop": 0.1},
      {"color": "#6699ff", "stop": 0.7},
      {"color": "#6600cc", "stop": 0.9},
      {"color": "#000000", "stop": 1}
    ],
    "opacity": 1,
    "radius": {
      "bottomLeft": 10,
      "bottomRight": 10,
      "topLeft": 10,
      "topRight": 10
    }
  },
  "border": false,
  "shadow": {
    "blur": 1,
    "color": "#999999",
    "offset": {
      "x": -5,
      "y": 5
    },
    "opacity": 0.5
  },
  "stem": false
}
lefttop righttop 0 0 element headerSpecial
{
  "background": false,
  "border": {
    "opacity": 0,
    "radius": {
      "bottomLeft": 10,
      "bottomRight": 10,
      "topLeft": 5,
      "topRight": 5
    },
    "size": 1,
    "color": "#000000"
  },
  "shadow": {
    "blur": 1,
    "color": "#000000",
    "offset": {
      "x": 0,
      "y": 22
    },
    "opacity": 0.2
  },
  "stem": false
}
bottommiddle topmiddle 0 0 element textShadow
{
  "background": {
    "color": [
      { "stop": 0, "color": "#ffffff" },
      { "stop": 1, "color": "#c8c8c8" }
    ],
    "opacity": 1,
    "radius": {
      "bottomLeft": 3,
      "bottomRight": 3,
      "topLeft": 3,
      "topRight": 3
    }
  },
  "border": {
    "color": "#000",
    "opacity": 1,
    "radius": {
      "bottomLeft": 3,
      "bottomRight": 3,
      "topLeft": 3,
      "topRight": 3
    },
    "size": 1
  },
  "shadow": {
    "blur": 1,
    "color": "#000000",
    "offset": {
      "x": -5,
      "y": 5 
    },
    "opacity":0.5
  },
  "stem": {
    "height": 5,
    "point": "middle",
    "width": 10
  }
}
bottomright topright 0 0 element 100
{
  "background": {
    "color": [
      { "stop": 0, "color": "#aadddd" },
      { "stop": 1, "color": "#ddaaaa" }
    ],
    "opacity": 1,
    "radius": {
      "bottomLeft": 0,
      "bottomRight": 10,
      "topLeft": 10,
      "topRight": 10
    }
  },
  "border": {
    "color": "#aaaaaa",
    "opacity": 1,
    "radius": {
      "bottomLeft": 0,
      "bottomRight": 10,
      "topLeft": 10,
      "topRight": 10
    },
    "size": 1
  },
  "shadow": false,
  "stem": {
    "height": 10,
    "point": "out",
    "width": 15
  }
}
bottomleft topleft 0 0 element 100
{
  "background": {
    "color": "#ffffff",
    "opacity": 1,
    "radius": {
      "bottomLeft": 5,
      "bottomRight": 5,
      "topLeft": 5,
      "topRight": 5
    }
  },
  "border": {
    "color": [
      { "stop": 0, "color": "#aadddd" },
      { "stop": 1, "color": "#ddaaaa" }
    ],
    "opacity": 0.5,
    "radius": {
      "bottomLeft": 5,
      "bottomRight": 5,
      "topLeft": 5,
      "topRight": 5
    },
    "size": 8
  },
  "shadow": false,
  "stem": {
    "height": 5,
    "point": "middle",
    "width": 10
  }
}
bottommiddle topmiddle 0 0 element 100
{
  "background": {
    "color": [
      { "stop": 0.8, "color": "#ffffff" },
      { "stop": 1, "color": "#000000" }
    ],
    "opacity": 1,
    "radius": {
      "bottomLeft": 5,
      "bottomRight": 5,
      "topLeft": 5,
      "topRight": 5
    }
  },
  "border": {
    "color": "#888888",
    "opacity": 1,
    "radius": {
      "bottomLeft": 5,
      "bottomRight": 5,
      "topLeft": 5,
      "topRight": 5
    },
    "size": 1
  },
  "shadow": false,
  "stem": false
}
bottomleft topleft -50 40 element 100
{
  "background": {
    "color": "#ff00ff",
    "opacity": 1,
    "radius": {
      "bottomLeft": 5,
      "bottomRight": 5,
      "topLeft": 5,
      "topRight": 5
    }
  },
  "border": {
    "color": "#000000",
    "opacity": 0.5,
    "radius": {
      "bottomLeft": 5,
      "bottomRight": 5,
      "topLeft": 5,
      "topRight": 5
    },
    "size": 1
  },
  "shadow": false,
  "stem": {
    "height": 10,
    "point": "in",
    "width": 5
  }
}
bottomright topright 0 0 element
{
  "background": {
    "color": "#282828",
    "opacity": 1,
    "radius": {
      "bottomLeft": 1,
      "bottomRight": 1,
      "topLeft": 1,
      "topRight": 1
    }
  },
  "border": false,
  "shadow": false,
  "stem": {
    "height": 5,
    "point": "middle",
    "width": 10
  }
}
bottomleft topleft 0 0 element 100 fb
The Canvas Tooltip plugin allows you to create tooltips that look (mostly) the same across browsers. These tooltips can have gradient backgrounds, rounded corners, dynamic content, and much more.

Tooltips can be attached to any html element. A single html element can also have multiple tooltips attached to it. Additionaly, the tooltip on an element can be triggered by events on a completely different element.

Speaking of events, any event supported by jQuery can be used to trigger the tooltip being shown and hidden. The events can be completely different from each other and don't even have to be attached to the same element.
Show Details|Hide Examples
  • basePadding
    Number
    Default:6
    The default padding (in pixels) to use when displaying the tooltip data (only considered when type is 'text').
    • Initialize a tooltip with a padding of 12px.
      
        $('.selector').canvasTooltip({
          basePadding: 12
        });
      
      
  • className
    String
    Default:""
    Name of class to apply to the tooltip data. The class must be defined seperately as ".tooltipData_className".
    • Initialize a tooltip using the next element after the target and insert the data as html.
        .tooltipData_red { color: red; }
      
        $('.selector').canvasTooltip({
          className: 'red'
        });
      
      
  • clone
    Boolean
    Default:true
    This variable comes into consideration when 'selector' is chosen as the source. If true then the element matching the selector will be copied into the tooltip. If false then the element will be moved into the tooltip.
    • Initialize a tooltip using another element as specified by the selector and insert the data as html, moving the matched element into the tooltip.
      
        $('.selector').canvasTooltip({
          type: 'html',
          source: 'selector',
          sourceData: '#tooltipDataItem',
          clone: false
        });
      
      
  • connection
    Object
    Default:{} - See element, tooltip, offset, target
    Container for different options related to position of the tooltip including connection points for the element and tooltip as well the offset and whether the target of the tooltip positioning should be the target element or the mouse.
  • connection.element
    String
    Default:"topleft"
    Attachment point on the target element. Possible values are: 'topleft', 'topmiddle', 'topright', 'bottomleft', 'bottommiddle', 'bottomright', 'lefttop', 'leftmiddle', 'leftbottom', 'righttop', 'rightmiddle', 'rightbottom'. Should be used in conjunction with connection.tooltip.
    • Initialize a tooltip that will be attached at the element's right bottom and at the tooltip's left top.
      
        $('.selector').canvasTooltip({
          connection: {
            element: 'rightbottom',
            tooltip: 'lefttop'
          }
        });
      
      
  • connection.offset
    Object
    Default:{ x: 0, y: 0 }
    Offset for the tooltip's attachment to the target element.
    • Initialize a tooltip that will be attached at the element's right bottom and at the tooltip's left top and then moved 10 pixels right and 7 pixels up.
      
        $('.selector').canvasTooltip({
          connection: {
            element: 'rightbottom',
            tooltip: 'lefttop',
            offset: {
              x: 10,
              y: -5
            }
          }
        });
      
      
  • connection.target
    String
    Default:"element"
    Specifies whether the tooltip should be attached to the target element or to the mouse. When the tooltip is attached to the mouse, an extra offset amount is added to ensure that the mouse does not hover over the tooltip when the startEvent is 'mousemove'.
    • Initialize a tooltip that will be attached at the mouse at the tooltip's left top.
      
        $('.selector').canvasTooltip({
          connection: {
            tooltip: 'lefttop',
            target: 'mouse'
          }
        });
      
      
  • connection.tooltip
    String
    Default:"bottomleft"
    Attachment point on the tooltip. Possible values are: 'topleft', 'topmiddle', 'topright', 'bottomleft', 'bottommiddle', 'bottomright', 'lefttop', 'leftmiddle', 'leftbottom', 'righttop', 'rightmiddle', 'rightbottom'. Should be used in conjunction with connection.element.
    • Initialize a tooltip that will be attached at the element's right bottom and at the tooltip's left top.
      
        $('.selector').canvasTooltip({
          connection: {
            element: 'rightbottom',
            tooltip: 'lefttop'
          }
        });
      
      
  • display
    Object
    Default:{} - See background, border, shadow, stem
    Container for different options related to visual aspects of the tooltip including the background, border, shadow, and stem.
  • display.background
    Object, Boolean (false)
    Container for different options related to background of the tooltip including the color, opacity, and radius. Pass false for no background.
  • display.background.color
    String (Hex or Oct value of color), Array[Object]
    Default:[ { stop: 0, color: '#ffffff' }, { stop: 1, color: '#e8e8e8' } ]
    The color of the background of the tooltip. Either a hex value for a color or an array is accepted. If there is an array then the background will be a linear gradient. The array expects objects of the form: { color: s, stop: n } where s is a hex value string for a color and n is a number between 0 and 1 inclusive. 0 represents the top of the tooltip while 1 represents the bottom.
    • Initialize a tooltip that has a gradient background with white at the top and black at the bottom.
      
        $('.selector').canvasTooltip({
          display: {
            background: {
              color: [
                { color:'#ffffff', stop: 0 },
                { color:'#000000', stop: 1}
              ]
            }
          }
        });
      
      
    • Initialize a tooltip that has a red background.
      
        $('.selector').canvasTooltip({
          display: {
            background: {
              color: '#ff0000'
            }
          }
        });
      
      
  • display.background.opacity
    Number [0-1]
    Default:1
    The opacity of the background of the tooltip.
    • Initialize a tooltip that has a transparent background.
      
        $('.selector').canvasTooltip({
          display: {
            background: {
              opacity: 0.5
            }
          }
        });
      
      
  • display.background.radius
    Number, Object
    Default:3
    The radius of the background of the tooltip in pixels. The radius can be set individually on each corner by passing in an object of the form: { topLeft: r1, topRight: r2, bottomLeft: r3, bottomRight: r4 }. If an object is used, unset values in the object will be assigned a radius of 0. Note that the background radius and border radius must be set independently of each other. Additionally, if the stem is on a corner, then the border radius for that corner will always be the same as the background radius for that corner.
    • Initialize a tooltip that has a 10 pixel radius on the background.
      
        $('.selector').canvasTooltip({
          display: {
            background: {
              radius: 10
            }
          }
        });
      
      
    • Initialize a tooltip that has a different radius on each corner of the background.
      
        $('.selector').canvasTooltip({
          display: {
            background: {
              radius: {
                bottomLeft: 0,
                bottomRight: 5,
                topRight: 10,
                topLeft: 15
              }
            }
          }
        });
      
      
  • display.border
    Object, Boolean (false)
    Container for different options related to border of the tooltip including the color, opacity, radius, and size. Pass false for no border.
  • display.border.color
    String (Hex or Oct value of color), Array[Object]
    Default:"#888888"
    The color of the border of the tooltip. Either a hex value for a color or an array is accepted. If there is an array then the border will be a linear gradient. The array expects objects of the form: { color: s, stop: n } where s is a hex value string for a color and n is a number between 0 and 1 inclusive. 0 represents the top of the tooltip while 1 represents the bottom.
    • Initialize a tooltip that has a gradient border with white at the top and black at the bottom.
      
        $('.selector').canvasTooltip({
          display: {
            border: {
              color: [
                { color:'#ffffff', stop: 0 },
                { color:'#000000', stop: 1}
              ]
            }
          }
        });
      
      
    • Initialize a tooltip that has a red border.
      
        $('.selector').canvasTooltip({
          display: {
            border: {
              color: '#ff0000'
            }
          }
        });
      
      
  • display.border.opacity
    Number [0-1]
    Default:1
    The opacity of the border of the tooltip.
    • Initialize a tooltip that has a transparent border.
      
        $('.selector').canvasTooltip({
          display: {
            border: {
              opacity: 0.5
            }
          }
        });
      
      
  • display.border.radius
    Number, Object
    Default:3
    The radius of the border of the tooltip in pixels. The radius can be set individually on each corner by passing in an object of the form: { topLeft: r1, topRight: r2, bottomLeft: r3, bottomRight: r4 }. If an object is used, unset values in the object will be assigned a radius of 0. Note that the border radius and background radius must be set independently of each other. Additionally, if the stem is on a corner, then the border radius for that corner will always be the same as the background radius for that corner.
    • Initialize a tooltip that has a 10 pixel radius on the border.
      
        $('.selector').canvasTooltip({
          display: {
            border: {
              radius: 10
            }
          }
        });
      
      
    • Initialize a tooltip that has a different radius on each corner of the border.
      
        $('.selector').canvasTooltip({
          display: {
            border: {
              radius: {
                bottomLeft: 0,
                bottomRight: 5,
                topRight: 10,
                topLeft: 15
              }
            }
          }
        });
      
      
  • display.border.size
    Number
    Default:1
    The size of the border of the tooltip in pixels.
    • Initialize a tooltip that has a border size of 10px.
      
        $('.selector').canvasTooltip({
          display: {
            border: {
              size: 10
            }
          }
        });
      
      
  • display.shadow
    Object, Boolean (false)
    Container for different options related to shadow of the tooltip including the color, opacity, offset, and blur. Pass false for no shadow.
  • display.shadow.blur
    Number
    Default:1
    The blur radius of the shadow for the tooltip in pixels.
    • Initialize a tooltip that has a blur radius of 5 pixels.
      
        $('.selector').canvasTooltip({
          display: {
            shadow: {
              blur: 5
            }
          }
        });
      
      
  • display.shadow.color
    String (Hex or Oct value of color)
    Default:"#333333"
    The color of the shadow for the tooltip.
    • Initialize a tooltip that has a green shadow.
      
        $('.selector').canvasTooltip({
          display: {
            shadow: {
              color: "#00ff00"
            }
          }
        });
      
      
  • display.shadow.offset
    Object
    Default:{ x: 3, y: 3 }
    The offset of the shadow for the tooltip.
    • Initialize a tooltip that has a shadow that extends 6 pixels to the right and 3 pixels down.
      
        $('.selector').canvasTooltip({
          display: {
            shadow: {
              offset: {
                x: 6
              }
            }
          }
        });
      
      
  • display.shadow.opacity
    Number [0-1]
    Default:0.25
    The opacity of the shadow for the tooltip.
    • Initialize a tooltip that has a mostly opaque shadow.
      
        $('.selector').canvasTooltip({
          display: {
            shadow: {
              opacity: 0.9
            }
          }
        });
      
      
  • display.stem
    Object, Boolean (false)
    Default:{} - See stem.width, stem.height, stem.point
    Container for different options related to stem of the tooltip including the width, height, and type of point. Pass false for no stem.
  • display.stem.height
    Number
    Default:5
    The height of the stem in pixels. Note that the height is measured perpendicular to the side of the tooltip to which it is connected.
    • Initialize a tooltip that has a stem 10 pixels long.
      
        $('.selector').canvasTooltip({
          display: {
            stem: {
              height: 10
            }
          }
        });
      
      
  • display.stem.point
    String
    Default:"middle"
    The direction of the point of the stem. Possible values are: "middle", "in", and "out". If "middle" is chosen, then the stem will be evenly proportioned. If "in" is chosen, then the stem will be a right triangle pointing inwards toward the middle of the tooltip. If "out" is chosen, then the stem will be a right triangle pointing outwards away from the middle of the tooltip.
    • Initialize a tooltip that has a stem pointing in.
      
        $('.selector').canvasTooltip({
          display: {
            stem: {
              point: 'in'
            }
          }
        });
      
      
    • Initialize a tooltip that has a stem pointing out.
      
        $('.selector').canvasTooltip({
          display: {
            stem: {
              point: 'out'
            }
          }
        });
      
      
  • display.stem.width
    Number
    Default:10
    The width of the stem in pixels. Note that the width is measured parallel to the side of the tooltip to which it is connected.
    • Initialize a tooltip that has a stem 5 pixels wide.
      
        $('.selector').canvasTooltip({
          display: {
            stem: {
              width: 5
            }
          }
        });
      
      
  • endEvent
    String
    Default:"mouseleave"
    Name of the event that will be used to trigger the tooltip being hidden.
    • Initialize a tooltip that will be hidden when the element is clicked.
      
        $('.selector').canvasTooltip({
          endEvent: 'click'
        });
      
      
  • endEventTarget
    HTML Element, jQuery object
    Default:initial element
    The endEvent will be triggered based on the endEventTarget element's events. This can provide the reverse functionality of the target option.
    • Initialize a tooltip that will be hidden when the mouse is leaves a different element.
      
        $('.selector').canvasTooltip({
          endEventTarget: $('#endTargetSelector')
        });
      
      
  • hide
    Function
    Default:function() { $(this).hide(); }
    Function to run in order to hide the tooltip.
    • Initialize a tooltip that will hide by fading out over 1 second.
      
        $('.selector').canvasTooltip({
          hide: function() {
            $(this).stop(true,true);
            $(this).hide('fade', 1000);
          }
        });
      
      
  • hideDelay
    Number
    Default:100
    Milliseconds to wait before hiding the tooltip when the end event is triggered. Default value of 100ms allows the user to move the mouse over the tooltip element without causing the tooltip to be hidden. It is still possible to make the tooltip go away when the mouse hovers over it if that is the desired functionality.
    • Initialize a tooltip that will hide 1 second after its end event is triggered.
      
        $('.selector').canvasTooltip({
          hideDelay: 1000
        });
      
      
  • maxWidth
    Number
    Default:$(window).width()
    Ensures that the tooltip will not be wider than the # of pixels specified by maxWidth.
    • Initialize a tooltip with a maximum width of 100px.
      
        $('.selector').attr('title', 'a b c d e f g h i'
          + ' j k l m n o p q r'
          + ' s t u v w x y z').canvasTooltip({
          maxWidth: 100
        });
      
      
  • show
    Function
    Default:function() { $(this).show(); }
    Function to run in order to show the tooltip.
    • Initialize a tooltip that will show by fading in over 1 second.
      
        $('.selector').canvasTooltip({
          show: function() {
            $(this).stop(true,true);
            $(this).show('fade', 1000);
          }
        });
      
      
  • showDelay
    Number
    Default:100
    Milliseconds to wait before showing the tooltip when the start event is triggered. Default value of 100ms helps prevent tooltips from popping up when the mouse passes over an element.
    • Initialize a tooltip that will show 1 second after its start event is triggered.
      
        $('.selector').canvasTooltip({
          showDelay: 1000
        });
      
      
  • source
    String
    Default:"title"
    Specifies where the data for the tooltip is located. Possible values are: 'title', 'next', 'selector', and 'ajax'. Used in conjunction with sourceData. Note that when 'title' is used the title attribute is removed from the element, but the data is stored so that any subsequent tooltips created on the same element can still use the title.
    • Initialize a tooltip using the next element after the target and insert the data as html.
      
        $('.selector').canvasTooltip({
          type: 'html',
          source: 'next'
        });
      
      
  • sourceData
    String (Selector | URL)
    Default:""
    If 'selector' is chosen as the source then sourceData should be the jQuery selector used to find the data. If 'ajax' is chosen as the source then sourceData should be a the URL that will be called that contains the data to display.
    • Initialize a tooltip using another element as specified by the selector and copy the data as html.
      
        $('.selector').canvasTooltip({
          type: 'html',
          source: 'selector',
          sourceData: '.tooltipDataItem'
        });
      
      
  • startEvent
    String
    Default:"mouseenter"
    Name of the event that will be used to trigger the tooltip being shown.
    • Initialize a tooltip that will be shown when the element is clicked.
      
        $('.selector').canvasTooltip({
          startEvent: 'click'
        });
      
      
  • startEventTarget
    HTML Element, jQuery object
    Default:initial element
    The startEvent will be triggered based on the startEventTarget element's events. This can provide the reverse functionality of the target option.
    • Initialize a tooltip that will be shown when the mouse is over a different element.
      
        $('.selector').canvasTooltip({
          startEventTarget: $('#startTargetSelector')
        });
      
      
  • target
    HTML Element, jQuery object
    Default:initial element or supplied target element (if passed as the 2nd parameter to the init function)
    Specifying a different target for the tooltip will allow it to appear relative to a different element than the one that triggers its events.
    • Initialize a tooltip that will be displayed relative to a different HTML Element than the instantiator.
      
        $('.selector').canvasTooltip({
          target: $('.otherSelector')
        });
      
      
  • type
    String
    Default:"text"
    Specifies whether to use ".text()" or ".html()" to insert the data for the tooltip into its container. Most of the time, you will use 'html' when you set your source as 'next' or 'selector' and you will use 'text' when you set your source as 'title'.
    • Initialize a tooltip using the next element after the target and insert the data as html.
      
        $('.selector').canvasTooltip({
          type: 'html',
          source: 'next'
        });
      
      
      This is a span that will be put inside the tooltip in this example.
Show Details|Hide Examples
  • onHide
    This event is triggered after the tooltip is hidden.
    • Initialize a tooltip that changes the target element's background color when it is shown and hidden.
      
        $('.selector').canvasTooltip({
          onHide: function() {
            $(this.target).css('background-color', '');
          },
          onShow: function() {
            $(this.target).css('background-color', '#0000ff');
          }
        });
      
      
  • onLoad
    This event is triggered after the tooltip is done loading.
    • Initialize a tooltip that shows an alert box when the tooltip is finished loading.
      
        $('.selector').canvasTooltip({
          onLoad: function() {
            alert('Done loading');
          }
        });
      
      
  • onShow
    This event is triggered after the tooltip is shown.
    • Initialize a tooltip that changes the target element's background color when it is shown and hidden.
      
        $('.selector').canvasTooltip({
          onHide: function() {
            $(this.target).css('background-color', '');
          },
          onShow: function() {
            $(this.target).css('background-color', '#0000ff');
          }
        });
      
      
Show Details
  • destroy
    .canvasTooltip("destroy")
    Removes the canvas tooltip functionality completely and returns the element back to its pre-init state.