Docs for other versions: 2.6 / 2.5 / 2.4 / 2.3 / 2.2 / 2.1 / 2.0 / 1.9


From MoodleDocs
Jump to: navigation, search


I assume that in due course, we will be replacing all uses of overlib with YUI, since that is now the JavaScript library of choice for mooodle.Tim Hunt 05:36, 14 December 2006 (CST)

overlib, available from is a javascript library for giving tooltip type popups on webpages. It is included in Moodle and used for giving feedback in the embedded (CLOZE) question type.

But in the credits for MOODLE,, they refer to the homesite for an extended version called overlibmws This is copied from the homepage:

The overlibmws library uses javascript for DHTML popups that serve as informational and navigational aids for websites. The overlib calls invoke either tooltip popups, or (typically more elaborate) sticky popups that hang around until they are actively closed or are replaced by another popup. Both types can be invoked with or without a caption. They are most commonly invoked via the onmouseover (hover) event, but also can be invoked via the onclick event, or both events, or any event supported by browsers for invoking javascript (e.g., onload).

One can make simple tooltip like popups in HTML with the title attribute but there are problems with that because they are rendered differently in different browsers. (Mozilla including Firefox unfortunately truncates the content and doesn't show linebreaks in spite of longstanding (>2 years) bugreport with many votes.) overLib gives much more display control and options, and works independently of browser.

Joseph Rézeau: 1. where is the OverLib in Moodle located?


2. is it possible to write in (in the HTML editor) calls to it without it being stripped out on saving?

Only in a composed web page (see attached screen shot). Not in forum posts, not in glossary definitions, etc. I much lament that this is still the case, in spite of my many protests in the past...

3. is it possible to make HTML pages outside Moodle, import them and use Overlib (either the one already in Moodle or a copy one puts in the course or site file catalog)?

Yes, very easily. All you have to do is to place a copy of overlib.js somewhere in your moodledata files, and of course point to it in your uploaded HTML files. I would recommend using a more recent version of overlib than the one provided with Moodle.

If one is in an ordinary HTML editing box for making a HTML page and wants to add an overlib tooltip you must go to the source display with the [<>] button and enter something like this:

<a href="javascript:void(0);" 
onmouseover="return overlib('This is a simple tooltip popup.', 
AUTOSTATUS, WRAP);" onmouseout="nd();">tooltip</a>

This gives an much more detailed formating:

<a name="sample" id="sample" href="javascript:void(0);"
 onmouseover="return overlib('Quite different colors
 and fonts from the default ones.', CAPTION,
 'The Caption', FGCOLOR, '#999999', BGCOLOR, '#333333',
 BORDER, 4, CAPTIONFONT, 'Garamond', TEXTFONT, 'Courier',
 TEXTSIZE, 3);" onmouseout="nd();">with caption</a>
<a href="javascript:void(0);" onmouseover="return
 overlib('Hi there', CAPTION, 'Hello Jeff!', STICKY );"
 onmouseout="nd();">composed web page</a>

would give this: Overlib.jpg

Here is a more practical application: giving a series of popup hints in connection with a quiz question:

<a href="javascript:void(0);" onmouseover="return overlib('your 
 Hint 1 contents', CAPTION, 'Hint 1', STICKY );"
 onmouseout="nd();">Hint 1</a> |
<a href="javascript:void(0);" onmouseover="return overlib('your
 Hint 2 contents', CAPTION, 'Hint 2', STICKY );"
 onmouseout="nd();">_2_</a> |
<a href="javascript:void(0);" onmouseover="return overlib('your
 Hint 1 contents', CAPTION, 'Hint 3', STICKY );"