You’ve probably seen them multiple times while never really wondering how they’re done. Tooltip are one of the handiest features developers have to let people know what a particular object does. Tooltips can be anything from descriptions to definitions, or even provide additional information about an object. Most frequently, you can see tooltips in games. Since you only have a limited amount of screen-room in games, developers need to think about how to show you most of the game, while minimizing the amount of helpful text that you see. In first person shooters this is often very easy, but when you move to games like Starcraft or Star Wars: Galactic Battlegrounds it becomes too hard to display enough information without layering modal windows and tooltips.
The same can be said about web pages. Rather than bombard a user with lists and paragraphs of text, maybe things can be more easily managed. The easiest example of this, would be definitions. Imagine coming across a word that you don’t understand. Wouldn’t it be easier if the developer just added a little feature where you could hover over a word and it would show a little popup telling you the definition?The following screenshots show a few examples of what I’m talking about:
Note that with the second image, the tooltip is clearly hovering on top of some text, as well, the tooltip graphic is a little more detailed than the first, which is a simple span.
To achieve this rather “complex” effect, you can simple have attach onmouseover/onmouseout events to the trigger text and a simple function which accepts the ID of the target as an attribute. The code for this would simply be:
function tooltip(id){
if(document.getElementById(id).style.display == '')
document.getElementById(id).style.display = 'none';
else
document.getElementById(id).style.display = '';
}
<a onmouseover="tooltip('target')" onmouseout="tooltip('target')">Trigger</a>
<div id="target" style="display: none; ">Some Text</div>While it seems simple enough, once you start monitoring a lot more events, things get a lot more confusing. The easiest way to handle something like this is to just create a function that will accept two values. The first will be the trigger and the second will be the target. A very simple concept, but one that takes a little more work than you would think.
For starters, there is no way for you to simply add “element.onmouseover” in javascript. Instead you have to use “element.addEventListener” which accepts 3 arguments.
Before we get to that stage, lets first set up our main function. Since javascript accepts $ as a string, lets use that, along with some other characters, as our function name. The reason being that it is almost guaranteed that you will never come across another function by that name unless you start using frameworks.
A good way to think about programming is to think about use before implementing a structure that you may not like. For example, I want to be able to write
$_jx.tooltip('trigger','target');and have it automatically assign the tooltip functionality to the trigger. In order to achieve this, we need to start working with functions within functions (and yes, even a fourth tier of that). Since tooltip is within $_jx, we can define it like this
function $_jx(){
this.tooltip = function (trigger,target){
}
}Note that we are using an anonymous function and using tooltip as an alias. A little strange, but it ensures easy use down the line. To attach the tooltip event to our trigger, we need to make use of “addEventListener”.
function $_jx(){
this.tooltip = function (trigger,target){
var trigger = trigger;
var target = target;
var offset = offset;
document.getElementById(trigger).addEventListener('mouseover',whattodo,false);
}
}First we’re going to create some local variables that will be visible to this.tooltip and all its children. Since addEventListener does not let us pass arguments to functions defined within the “whattodo” section, we need some way of accessing them without over-writing any other variables.
The whattodo section will be a little confusing. What we will actually be doing is using yet another anonymous function. I’ll show you the function code below and then I’ll show you what our entire tooltip function will look like.
function (){
document.getElementById(target).style.display = '';
}The entire function now looks like this
function $_jx(){
this.tooltip = function (trigger,target){
var trigger = trigger;
var target = target;
var offset = offset;
document.getElementById(trigger).addEventListener('mouseover',function (){
document.getElementById(target).style.display = '';
},false);
}
}It isn’t pretty, but it is effective. That will cause our “target” to by displayed when you hover over the “trigger”. However, if you move your mouse off the trigger, the target stays displayed. That is easily fixed and is essentially a copy/paste of the addEventListener section that we have right now. We will only change mouseover to mouseout and the value for document.getElementById(target).style.display to none.
function $_jx(){
this.tooltip = function (trigger,target){
var trigger = trigger;
var target = target;
var offset = offset;
document.getElementById(trigger).addEventListener('mouseover',function (){
document.getElementById(target).style.display = '';
},false);
document.getElementById(trigger).addEventListener('mouseout,function (){
document.getElementById(target).style.display = 'none';
},false);
}
}And there you go. To use this all you will need to do is the following.
1. Include the script after </body> Since the tooltips don't need to be seen until AFTER the page is loaded, don't waste precious load time loading up the script.
<script src="filename.js" type="text/javascript"></script>
<script type="text/javascript">
$_jx = new $_jx();
$_jx.tooltip('trigger','target');
</script>You just need to make sure that style=”display: none” is present in the target’s tag. Other than that, no modifications need to be made to your existing code to add tooltips.
