Adding custom tooltips

HTML tooltips, set up through the title attributes of elements, allow only text-based tooltips with no control over the layout. In this example, we will enhance an existing element with the YUI Tooltip widget.

How to do it...

To begin, set up a PHP page, tooltip.php, containing an image with the title attribute set:

<?php
require_once(dirname(__FILE__) . '/../config.php');
$PAGE->set_context(get_context_instance(CONTEXT_SYSTEM));
$PAGE->set_url('/cook/tooltip.php');
$PAGE->requires->js('/cook/tooltip.js', true);
echo $OUTPUT->header();
?>
<img id="logo" src="../theme/image.php?theme=standard&image=moodlelogo" title="Moodle Logo" />
<?php
echo $OUTPUT->footer();
?>

Next, set up the associated JavaScript file tooltip.js:

YUI().use("yui2-yahoo-dom-event", "yui2-animation", "yui2-container", function(Y) {
var YAHOO = Y.YUI2;
var toolTip = new YAHOO.widget.Tooltip("toolTip", {
context: "logo"});
});

Create an element to which we will...