Resource Tooltips

[Lyro]

Here's a quick example of using BBCode+ to implement tooltips for text (or anything, really - the text could be replaced by BBCode). ( official clown business )

Hover over the underlined text for [div class=tooltipContainer][div class=tooltipBoxContainer][div class=tooltipBox]A tip.[/div][/div]a quick tip[/div].

[class=tooltipContainer] display: inline; position: relative; [/class] [class=tooltipBoxContainer] display: inline-block; opacity: 0; position: absolute; height: 100%; text-align: center; transition: opacity 0.4s; transition-delay: 0s; width: 100%; [/class] [class name=tooltipBoxContainer state=hover] opacity: 1; transition-delay: 0.8s; [/class] [class name=tooltipBox] background-color: white; border: solid 1px #888; box-shadow: 3px 3px 3px #555; color: #666; display: inline-block; font-family: Arial, sans-serif; font-size: 12px; padding: 2px 5px; pointer-events: none; text-align: center; [/class] The code used is provided below:

Hover over the underlined text for [div class=tooltipContainer][div class=tooltipBoxContainer][div class=tooltipBox]A tip.[/div][/div][u]a quick tip[/u][/div].

[nobr]
    [class=tooltipContainer]
        display: inline;
        position: relative;
    [/class]

    [class=tooltipBoxContainer]
        display: inline-block;
        opacity: 0;
        position: absolute;
        height: 100%;
        text-align: center;
        transition: opacity 0.4s;
        transition-delay: 0s;
        width: 100%;
    [/class]

    [class name=tooltipBoxContainer state=hover]
        opacity: 1;
        transition-delay: 0.8s;
    [/class]

    [class name=tooltipBox]
        background-color: white;
        border: solid 1px #888;
        box-shadow: 3px 3px 3px #555;
        color: #666;
        display: inline-block;
        font-family: Arial, sans-serif;
        font-size: 12px;
        padding: 2px 5px;
        pointer-events: none;
        text-align: center;
    [/class]
[/nobr]