Adding MouseOver Tooltips Within Desire2Learn

Lightly tested with: IE 7/8, Firefox (Win) 3.0/3.5, Chrome 5/6, Safari (Win/Mac) 5, Safari (Mobile). No guarantees for browsers earlier or later.

I’ve been working both angles of my strengths lately – I was asked by a faculty member who was trying to use the D2L tools for glossary and content in conjunction to provide context sensitive tool tip like definitions of terms. Like all web programmers, why start in a vacuum? So knowing that a great tooltip JS is available in JQuery, I considered using it.  The JQuery solution is a large one to embed the entire library for a couple of functions. Looking further, I searched out this tutorial/premade tooltip script, which does the job nicely. It would clobber any styles created by D2L that had been already added to a topic created prior to adding the script, so I had to hack around it to fix that. I also had to fix the tooltip always surfacing above the text, which in the frames based LMS world, defeats the purpose of having a definition; in this case you get a definition you can’t read because it’s behind a frame (or the top of the window). Another fix I put in was to ensure the box did not appear off screen if it was too close to the edge of the window, it still does in certain cases, which I haven’t narrowed down – if anyone out there wants to take a crack at fixing it, be my guest.

The implementation of the script isn’t too difficult if you’re OK with editing HTML code (a matter of adding three lines and editing two lines) and are precise in your edits.

Here’s a link to the PDF instructions and the zipped file with the javascript and CSS file.

Of course, if there’s any errors please let me know and I’ll correct and/or clarify them as soon as possible.