/**
    This is a simple way to present extended tooltip over any HTML tag.
    To use it:
        - mark element which needs tooltip with class: lightTipped
        - insert tooltip container (usually <div>) as a next element after element which needs tooltip, and mark it with class: lightTip
        - optionally add css styles inline to rule the size of tooltip etc.

    Example:
    ---------------------------------------------------------------------
        <button class="lightTipped">Click me!</button>
        <div class="lightTip">
            <b>THIS IS VERY IMPORTANT BUTTON TOOLTIP<b>
            which will be presented when you move mouse over the button
        </div>
    ---------------------------------------------------------------------
*/

.lightTip {
    display: none;
    padding: 5px;
    border: 1px solid #bbb;
    box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    position: absolute;
    z-index: 100;
    background-color: #ffffca;
}

.lightTipped:hover + .lightTip {
    display: block;
}

.lightTip:hover {
    display: block;
}