Tooltips through data-attributes
34 |This tooltip script is a basic example of how data attributes can be used to add a tooltip functionality to DOM elements. The tooltips are created for each element by reading out the title attribute. Additionally the tooltip offset can be configured by passing a JSON option string to the data attribute. This concept comes from AngularJS and provides a quick extensibility.
35 |Demo
42 |43 | Tooltip demo 1 (hover here) 44 |
45 |46 | Tooltip demo 2 (hover here) 47 |
48 |Facts
55 |Here are some key facts that should provide a short overview of what Tooltip.js is and how it works:
56 |-
57 |
- Configuration via HTML and data attributes 58 |
- Customizable via CSS 59 |
- Extensible (JavaScript code is about 150 lines) 60 |
- Runs in all major browsers and Internet Explorer 9+ 61 |
- No external dependencies 62 |
So the script is very basic and can be extended with various features. It's meant to be a learning example of how a tooltip functionality can be realized by using data attributes and parsing JSON string options.
64 |Usage
71 |After downloading the package from GitHub, you just need to include the JavaScript file in the HTML code of your site. That's it. Any further configuration is optional. From this point, when the HTML page has been loaded, all elements having the data attribute "data-tooltip" will be processed and provided with the tooltip functionality. The tooltip text comes from an additional title attribute. A sample element looks like this:
72 |73 | <div data-tooltip title="I'm a tooltip text">Demo</div>74 |
You can also specify additional options to define a custom offset or a CSS class for each tooltip by using a JSON option string:
75 |76 | <div data-tooltip="{ 'offset': 10, 'class': 'alt-tooltip' }" title="I'm a tooltip text">Demo</div>77 |
This would set the tooltip offset (relative to the mouse cursor) to 10 pixels for this element. It has to be said that this is a very basic implementation of parsing a JSON option string. So you'll have to use the single quotes for attributes in order to make JSON.parse work. If you want to omit the single quotes you could use a library like the relaxed JSON parser.
78 |In addition you may set the default options which contain values for tooltipId and offsetDefault. This will affect all tooltips on the page. You can do this by using the following code:
79 |
80 | tooltip.setOptions({
81 | tooltipId: "example",
82 | offsetDefault: 20
83 | });
84 | Finally we will have a look at the CSS configuration of the tooltip. There's always one div element added and removed to the body element when hovering over a tooltip source element. By default this div element has the id "tooltip". So the CSS is very basic to style the tooltip:
85 |
86 | #tooltip {
87 | position:absolute;
88 | background:#DB2A64;
89 | color:#ffffff;
90 | padding:8px;
91 | }
92 | That's all. As the Tooltip.js script is very basic, all tooltips on a page share the same look. You can go ahead and extend the script if you want to use different styles for each tooltip.
93 |