A full description of these is available in Chapter 8.
We can modify the appearance of tooltips using CSS. There are three style classes
that we can use: .tool-tip, .tool-title, and .tool-text. The tooltip is
encapsulated by the .tool-tip class, and the .tool-title and .tool-text styles
relate to the title and the content.
Chapter 9
[ 271 ]
This code demonstrates how we can add some CSS to the document to override the
default tooltip CSS:
// prepare the cSS
$css = '/* Tooltips */
.tool-tip
{
min-width: 100px;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
}
.tool-title
{
text-align: center;
}
.tool-text {
font-style: italic;
}';
// add the CSS to the document
$doc =& JFactory::getDocument();
$doc->addStyleDeclaration($css);
Fx.Slide
We will use the mootools Fx.Slide effect to demonstrate how we can build a PHP
class to handle some mootools JavaScript. The Fx.Slide effect allows an XHTML
element to seamlessly slide in and out of view horizontally or vertically.
We'll create a class named 'Slide', which will handle the Fx.
Pages:
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372