fxToolTip.js is a small, simple library designed to show tooltips on hover over any DOM element. It uses a combination of JavaScript and css styles to provide flexibility and ease of implementation. It has no dependencies and should work on any modern browser (i.e., not Internet Explorer 8.0 and earlier). fxToolTip.js supports method chaining and has special code to detect and integrate with d3.js.
On this page you will see several demonstrations (shaded in light blue) of foxToolTip.js in action. Hover over each of them to see some fxToolTip.js features.
- Auto Positioning
- Mouse Tracking
- Transitions
- Content
- Style
fxToolTip.js features autopositioning, which evaluates the size of the tooltip, the position of the target element, and the available document viewport space to position the tooltip at the optimim position. Try hovering over the text in the corners to see this in action. fxToolTip.js will also adjust to center the arrow over the target, eventhough the tooltip itself can't be. Try hovering over the text in the upper left corner to see a demonstration of this
foxToolTip.js can position the tooltip relative to the target element or the cursor. Try hovering over the picture of the tiger to see the tooltip position relative to the cursor and follow it as it moves over the target element.
fxToolTip.js allows you to set a transition delay and duration to show and hide the tooltip. This demonstrates a 1 second delay and 0.4 second transition
You can put and valid html content into a tooltip. This is a demonstration of embedding an image in a tooltip And this is a demonstration of embedding a table in a toolTip. This tooltip displays inline svg
Each tooltip can be individually styled, to include foreground and background color, opacity, font size and family, margins, border radius, and drop shadow. Here is an example of some of the things you can do.