- Description:
fxToolTip 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 will automatically size and position tooltips (default behavior) to ensure they are displayed in the viewport. Tooltips can be positioned relative to their target DOM element (default behavior) or track the mouse. fxToolTip supports method chaining and integrates nicely with d3.js. Tooltips can be styled in a wide variety of ways, and can contain any valid HTML (text, tables, images, svg, etc.).
Installation
npm install fx.tooltip.js --save -or- npm install -g fx.tooltip.js //install globallyDemonstrations
Usage
Include fxTooltip in your project in one of two ways:
You can include a reference to the built version of the library
<!DOCTYPE Html> <html> <head> <body> <script type = 'text/javascript' src = 'fxToolTip.min.js'></script> . <!-- or --> . <script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/npm/fx.tooltip.js@latest/dist/fxToolTip.js'></script> . </body> </head> </html>Or you can include it in your JavaScript build
import {default as fxToolTip} from './node_modules/fx.tooltip.js';if you use this option note that the source files are in ES6 (unlike the distribution files which have been transpiled). In this case, if you need to support older browsers you may want to edit your .babelrc file to specifically transpile fxToolTip:
{ "exclude": "/node_modules\/(?!fx.tooltip.js)/" }Minimal Example
The following example creates a tooltip that will show when the mouse hovers over the div element with the id of myDiv. The tooltip will display with all of the default properties. The create method returns a Tip class object whose methods may be invoked to customize its properties.
<!DOCTYPE Html> <html> <head> <body> <div id = 'myDiv'>This is a sample DOM element</div> <script type = 'module'> import {default as fxToolTip} from './node_modules/fx.tooltip.js'; const tooltipText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'; fxToolTip.create('myDiv', tooltipText); </script> </body> </head> </html>Tooltip Content
Content for tooltips in fxToolTip.js can contain any valid HTML, not just text. The content can be styled using CSS selector styles or in-lined within the HTML itself. Here are a few examples:
Tables
When using tables and auto-sizing in fxToolTip, it may be necessary to set the minimum width using the minWidth method on the Tip object.
let table = '<table id = 'table' width='100%'><tr><th>id</th><th>name</th><th>address</th></tr><tr><td>1</td><td>Bill Smith</td><td>17 Cherry Lane</td></tr><tr><td>2</td><td>Ed Walker</td><td>427 Oak Lane</td></tr></table>' let content = '<p class='centeredHeading'>Address</p>' + table; let myToolTip = fxToolTip.create('myElement', content) .minWidth('300px');Images
Embedding images is possible by using the image tag. To support auto-sizing, you should include the height and width attributes in the image tag, and set the minimum width using the minWidth method on the Tip.
let content = '<p class='centeredHeading'>Company Logo</p><img src=logo.png alt='logo' width='300px' height='300px'></img>'; fxToolTip.create('myElement', content) .minWidth('300px') .arrowSize('0.5em') .cursor('pointer') .padding('5px', '1em', '2em');You may also embed inline svg if your browser supports it. To support auto-sizing, it may be necessary to set the minimum width using the minWidth method on the Tip.
var svg = '<svg width='250' height='250'><rect x='50' y='50' rx='20' ry='20' width='150' height='150' style='fill:red;stroke:black;stroke-width:5' /></svg>' fxToolTip.create('myElement', svg) .minWidth(250) .mousePoint(true) .trackMouse(true);Integrating with d3.js
d3.js has a few peculiarities (especially with respect to d3 selectors), that fxToolTip.js accommodates. In typical d3 coding, one generally won't save a unique variable for each tooltip, as d3's chaining methods are generally used to create svg and other objects. This is easily accommodated by using the d3.js each method to create tooltips. Note that each element that will have a tooltip associated with it must have a unique id. The following code illustrates one convenient way to do this:
let svg = d3.select('body').append('svg').attr('id', 'svg') .attr('width', width + margin.right + margin.left) .attr('height', height + margin.top + margin.bottom); let svgGroup = svg.append('g') .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); let node = svgGroup.selectAll('g.node') .data(nodes); let nodeEnter = node.enter().append('g') .attr('class', 'node'); nodeEnter.append('circle') .attr('r', 1e-6) .style('fill', 'lightSteelBlue') .style('stroke', 'lightSteelBlue') //This is where we assign a unique id .attr('id', function(d, i) { return 'node' + i }) //This is where we create a tooltip for each node .each (function (d) { var content = '<p>' + d.toolTipText + '</p>'; fxToolTip.create('node' + d.id, content) .backgroundColor('midnightBlue') .backgroundOpacity(0.9) .foregroundColor('linen') .transitionVisible(0.5, 0.4) .transitionHidden(0, 0.4) .padding('0px 10px') .borderRadius(16) .arrowSize(16); };You can find a demo of integrating fxToolTip with D3.js at https://michaelrfox.github.io/demos/fxTooltipDemos/d3/.
- Source:
- Copyright:
- Michael R. Fox, Ph.D., 2021, 2022
- License:
- MIT Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sub-license, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: - The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software: THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. *
fxToolTip 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 will automatically size and position tooltips (default behavior) to ensure they are displayed in the viewport. Tooltips can be positioned relative to their target DOM element (default behavior) or track the mouse. fxToolTip supports method chaining and integrates nicely with d3.js. Tooltips can be styled in a wide variety of ways, and can contain any valid HTML (text, tables, images, svg, etc.).
Installation
npm install fx.tooltip.js --save
-or-
npm install -g fx.tooltip.js //install globally
Demonstrations
Usage
Include fxTooltip in your project in one of two ways:
You can include a reference to the built version of the library
<!DOCTYPE Html>
<html>
<head>
<body>
<script type = 'text/javascript' src = 'fxToolTip.min.js'></script>
.
<!-- or -->
.
<script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/npm/fx.tooltip.js@latest/dist/fxToolTip.js'></script>
.
</body>
</head>
</html>
Or you can include it in your JavaScript build
import {default as fxToolTip} from './node_modules/fx.tooltip.js';
if you use this option note that the source files are in ES6 (unlike the distribution files which have been transpiled). In this case, if you need to support older browsers you may want to edit your .babelrc file to specifically transpile fxToolTip:
{
"exclude": "/node_modules\/(?!fx.tooltip.js)/"
}
Minimal Example
The following example creates a tooltip that will show when the mouse hovers over the div element with the id of myDiv. The tooltip will display with all of the default properties. The create method returns a Tip class object whose methods may be invoked to customize its properties.
<!DOCTYPE Html>
<html>
<head>
<body>
<div id = 'myDiv'>This is a sample DOM element</div>
<script type = 'module'>
import {default as fxToolTip} from './node_modules/fx.tooltip.js';
const tooltipText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
fxToolTip.create('myDiv', tooltipText);
</script>
</body>
</head>
</html>
Tooltip Content
Content for tooltips in fxToolTip.js can contain any valid HTML, not just text. The content can be styled using CSS selector styles or in-lined within the HTML itself. Here are a few examples:
Tables
When using tables and auto-sizing in fxToolTip, it may be necessary to set the minimum width using the minWidth method on the Tip object.
let table = '<table id = 'table' width='100%'><tr><th>id</th><th>name</th><th>address</th></tr><tr><td>1</td><td>Bill Smith</td><td>17 Cherry Lane</td></tr><tr><td>2</td><td>Ed Walker</td><td>427 Oak Lane</td></tr></table>'
let content = '<p class='centeredHeading'>Address</p>' + table;
let myToolTip = fxToolTip.create('myElement', content)
.minWidth('300px');
Images
Embedding images is possible by using the image tag. To support auto-sizing, you should include the height and width attributes in the image tag, and set the minimum width using the minWidth method on the Tip.
let content = '<p class='centeredHeading'>Company Logo</p><img src=logo.png alt='logo' width='300px' height='300px'></img>';
fxToolTip.create('myElement', content)
.minWidth('300px')
.arrowSize('0.5em')
.cursor('pointer')
.padding('5px', '1em', '2em');
You may also embed inline svg if your browser supports it. To support auto-sizing, it may be necessary to set the minimum width using the minWidth method on the Tip.
var svg = '<svg width='250' height='250'><rect x='50' y='50' rx='20' ry='20' width='150' height='150' style='fill:red;stroke:black;stroke-width:5' /></svg>'
fxToolTip.create('myElement', svg)
.minWidth(250)
.mousePoint(true)
.trackMouse(true);
Integrating with d3.js
d3.js has a few peculiarities (especially with respect to d3 selectors), that fxToolTip.js accommodates. In typical d3 coding, one generally won't save a unique variable for each tooltip, as d3's chaining methods are generally used to create svg and other objects. This is easily accommodated by using the d3.js each method to create tooltips. Note that each element that will have a tooltip associated with it must have a unique id. The following code illustrates one convenient way to do this:
let svg = d3.select('body').append('svg').attr('id', 'svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom);
let svgGroup = svg.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
let node = svgGroup.selectAll('g.node')
.data(nodes);
let nodeEnter = node.enter().append('g')
.attr('class', 'node');
nodeEnter.append('circle')
.attr('r', 1e-6)
.style('fill', 'lightSteelBlue')
.style('stroke', 'lightSteelBlue')
//This is where we assign a unique id
.attr('id', function(d, i) { return 'node' + i })
//This is where we create a tooltip for each node
.each (function (d) {
var content = '<p>' + d.toolTipText + '</p>';
fxToolTip.create('node' + d.id, content)
.backgroundColor('midnightBlue')
.backgroundOpacity(0.9)
.foregroundColor('linen')
.transitionVisible(0.5, 0.4)
.transitionHidden(0, 0.4)
.padding('0px 10px')
.borderRadius(16)
.arrowSize(16);
};
You can find a demo of integrating fxToolTip with D3.js at https://michaelrfox.github.io/demos/fxTooltipDemos/d3/.