/* Styles for elements having a data-tooltip attribute - using the star selector is processor intensive
     so you may wish to change this to list a known, limited set of tags instead */
span[data-tooltip] {
    /* Relativly position the tooltip to enable us to position:absolute
           the generated content */
    position: relative;
    /* Links inherit the !important cursor rule from above */
    cursor: help;
    /* Moz requires the text-decoration here (as it won't allow the use of
          text-decoration:none on generated content) which is why I use the bottom 
          border to display a more accessible underline */
    text-decoration: none;
    border-bottom: 1px dotted #aaa;
    /* Remove the styles for IE7 and below - could be passed using conditional comments */
    *text-decoration: inherit;
    *border-bottom-width: inherit;
    *border-bottom-style: inherit;
    *cursor: inherit;
    *position: inherit;
}

/* Default :before & :after values */
span[data-tooltip]:after, span[data-tooltip]:before {
    content: "";
    /* Don't show tooltip by default */
    opacity: 0;
    /* Set a high z-index */
    z-index: 2000;
    /* -moz won't understand the text-decoration here but inherits the parent value of "none" successfully */
    text-decoration: none !important;
    outline: none;
}

/* Tooltip body - shown on hover or focus */
span[data-tooltip]:hover:after, span[data-tooltip]:focus:after {
    /* Slightly opaque tooltip */
    opacity: 0.94;
    /* Set display to block (or inline-block) */
    display: inline-block;
    white-space: pre-wrap;

    /* Use the data-tooltip attribute to set the content*/
    content: attr(data-tooltip);
    /* Position the tooltip body under the arrow and in the middle of the text */
    position: absolute;
    top: 120%;
    left: 10%;
    margin: 0 0 0 0px;
    /* Set the width */
    /*width: 450px;*/
    /* Pad */
    padding: 5px;
    /* Style the tooltip */
    line-height: 18px;
    /* min-height */
    min-height: 18px;
    /*min-width*/
    min-width: 200px;
    /* Set font styles */
    color: #fcfcfc;
    font-size: 16px;
    font-weight: normal;
    font-family: helvetica neue, calibri, verdana, arial, sans-serif;
    /* Fallback background color */
    background: #3198dd;
    text-align: center;
    outline: none;
    /* Moz doesn't recognise the following... */
    text-decoration: none !important;
    /* Round the corners */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    /* Add a drop shadow */
    -moz-box-shadow: 2px 2px 4px #ccc;
    -webkit-box-shadow: 2px 2px 4px #ccc;
    box-shadow: 2px 2px 4px #ccc;
    /* Add a Text shadow */
    text-shadow: #2187c8 0 1px 0px;
}