Tips for Tooltipster — Annotate with style
Footnotes are terrible for most online platforms. Scrolling down to look up additional information kills the reader’s momentum. But there are more efficient ways for scholars and web developers to display additional information on the web. For instance, one can use tooltips. A tooltip is a graphic user interface element (basically a pop-up box) that will appear to display additional information. Tooltips can offer a way for web developers to annotate texts and add footnotes without interrupting the reader.
Yet, standard tooltips are ugly and boring. What if you are building a website and the basic tooltip just doesn’t cut it? Well, you may want to consider Tooltipster, an easy to use jQuery plugin that allows users to add customizable tooltips! Tooltipster provides unique styles, formatting, and usability options for web tooltips. Check out the website to see demos of all the features. Those who use Bootstrap and don’t need as many features can check out their tooltip plugin. Tooltipster does require some knowledge of HTML and CSS, so if that scares you off, maybe consider these WordPress plugins for tooltips. But, if you have some basic knowledge of web developing, follow along!
Installation
Before making awesome tooltips, we need to install Tooltipster. First we need jQuery, a popular JavaScript library utilized by many web developers!
Ideally, you have your basic web setup with index.html and a stylesheet or start with a template. Within the root directory (your main folder), you need to add in the jQuery file, a .js file with a name similar to jquery-2.1.4.min.js (version number may differ). So theoretically your root directory will have at least the index and jQuery file. It’s okay if you have your stylesheet in a subfolder.
Once you download Tooltipster, you’ll receive a zip file with several subfolders. Once extracted, you’ll want to copy over the entire js folder into the root. Inside the css folder, find the tooltipster.css file and drag that into the root as well.
Yay! We have all our files in. Now we need to load them! To do this, we’ll be working in our index.html file.
In the <head>, link the tooltipster.css stylesheet as you may have already done for your standard stylesheet. The CSS section provides an example:
You’ll also need to load jQuery and Tooltipster. To do this, you’ll use the <script> tag, linking the correct sources inside. The example above (under js) links both the jquery-2.1.4.mins.js and the jquery.tooltipster.min.js.
Note: You may wonder why the js folder you dragged over has two files. Both files have the same code, so we only need to load one. The .min version is compacted to save space. The other reads easy in case you want to check out the code under the hood.
So, we’re done, right? WRONG! We actually need to add another <script> (listed below). For this script, we aren’t loading previously written code but writing the code ourselves (you’ll see why later). Within the tags, the first line is simply telling when to run our code (when the document loads). After, we select the CSS class of our choice ( I used ‘tooltip’) and apply the .tooltipster() method. If this is confusing, just copy and paste the following beneath your two scripts:
<script>
$(document).ready(function() {
$('.tooltip').tooltipster();
});
</script>Now the moment of truth: you can test it out by giving an <a> tag the class we selected (tooltip) and a title value to add in the text to be displayed.
<a href=“#” class=“tooltip” title=“Tooltip!”>HERE</a></p>You can adjust the title and text within in the tag. If you didn’t muck up the details, your tooltip should show up by hovering the mouse over the link:
While we used an <a> tag to test it out, tooltips can be applied to any element of your choice. For example, one might use the <span> tag for regular text.
Options
The great thing about Tooltipster is that it offers many different options on how you want a tooltip to function. These options can be customized just by utilizing some basic JavaScript. Let’s start off simple and cause the tooltip to appear to the right(instead of the top).
First, you’ll have to go back to the script you copied into the head.
Remember, the first line specifies when to run the function, so we want to add our future code inside this function. To do this, you’ll just add a blank line beneath $(‘.tooltip’).tooltipster(); and begin typing new code. For our new line, copy the format of the previous line but change the class from tooltip to tooltip-right. This allows us to define a new class for tooltips appearing right of the object without changing the position of our default class. After you select the class, you’ll add the tooltipster method:
Once you have your new class started, we’ll open up the method to change some of the object’s properties. Instead of two closed parentheses (), we want to add in a set of curly brackets to customize our tooltip. Don’t forget to close your parentheses and add a semicolon.
Okay, you’ve got all the hard work done. Once this empty shell has been set up, you are free to add the changes you desire. The different options may be referenced HERE, but we will just be changing the position property.
To make the tooltip appear to the right, we’ll change the position property. To do so, we’ll use the format: name of the property (position), colon, and value (‘right’). Certain values will require quotation marks, unless they are an integer(whole number) or boolean(true or false). These can be found from the examples on Tooltipster’s website. If you wanted to change more properties of the same class, you just add a comma and repeat the process.
These new properties will further change the tooltip. Changing the trigger property to ‘click’ will require users to click the element for the tooltip to appear. The animation property will change the manner in which the tooltip appears on the screen. I recommending reading the different options on the website to figure out what changes you want to implement.
Styling
Themes
Tooltipster provides an additional four themes and allows users to easily create their own. The additional files are included in the themes folder in the original download as css files (ex. tooltipster-noir.css).
You can use these themes by uploading them to your website folder and then linking the stylesheet, just like you did with tooltipster.css.
Alternatively, you can copy the code into the main tooltipster.css style sheet.
Once loaded, we need to implement the alternative themes. To do this, you’ll need to change the value of the theme property, just like you changed position. The value will be the name of the theme, thus i’ll change the theme of my previous ‘right’ tooltip by adding theme: ‘tooltipster-noir’
Custom themes
If the included themes don’t suit you, you’ll need to create your own. When you open the tooltipster.css file, the code offers comments to instruct you on how to create custom themes. To create your own, you’ll want to copy the .tooltipster-default and .tooltipster-content sections:
Once you have these copied, you’ll need to change the name of .tooltipster-default to one of your own. I’ll use .tooltipster-custom. Don’t change tooltipster-content.
Now, you can go ahead and change the CSS styling to your heart’s content. Just make sure you go back to index.html and change the theme property to ‘tooltipster-custom’ like we’ve done in the past. For my example, I changed the background color and font size:
Custom styles can be used to classify different types of tooltips for your reader. For example, commentary could be one color and references another. This allows digital humanists to distinguish different annotations for the reader.
Adding Images/HTML
You may want to spice up tooltip content by adding an image. Maybe with the word ‘lion,’ you want an actual picture of a lion to show up. Sadly, doing this in the title value is tricky. I’ll cover a better method that allows the use of any HTML tags in the tooltip’s content. To add HTML tags like <img>, you will need to return to our script inside the <head> of index.html.
Your content will be added as a property within our previous script. To do this, add the following line of code for the the property content:
content: $(‘<span> </span>’)
Between the span tags, you can add any HTML that you desire, this will override any content within title. Throw in an <img> tag between the spans to add your image.
That’s a wrap
This tutorial should be enough to get you started with Tooltipster. Overall, this plugin has so much potential. The creators provided a great deal of flexibility for users, while offering extensive features by default. The one downside is the small learning curve for those lacking web developing experience. Otherwise, I’d have to say Tooltipster lived up to its name!
