Tooltip

by dirtyd77

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<p>(Change values in HTML to see how the text will align, then click 'Run')</p>
<div class="tooltip">
    <div class="tooltip-header">
        <h3>Oct 22</h3>
    </div>
    
    <div class="tooltip-body">
        <div class="tooltip-body-textWrapper">
            <p>
                <span>O:</span>
                <span>455.92</span>
            </p>
            <p>
                <span>H:</span>
                <span>475.42</span>
            </p>
            <p>
                <span>L:</span>
                <span>443.11</span>
            </p>
            <p>
                <span>C:</span>
                <span>450.08</span>
            </p>
        </div>
    </div>
    
    <div class="downArrow"></div>
</div>

CSS

.tooltip, .tooltip *{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
}

.tooltip{
    position: absolute;
    min-height: 100px;
    min-width: 50px;
}

.tooltip > div{
    position: relative;
}

.tooltip-header{
    background: #0076A4;
    color: #ffffff;
    width: 100%;
    border: 1px solid #0076A4;
    border-width: 1px 1px 0px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.tooltip-header > h3{
    text-align: center;
    font-size: 12px;
    padding: 2px;
}

.tooltip-body{
    background: #F5FBFE;
    color: #0076A4;
    width: 100%;
    height: auto;
    border: 1px solid #0076A4;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.tooltip-body-textWrapper{
    padding: 5px 10px;
}

.tooltip-body-textWrapper > p{
    text-align: center;
    font-size: 10px;
    padding: 1px 0;
}

.tooltip-body-textWrapper > p > span:first-child{
    font-weight: bold;
}

.downArrow {
    margin: auto;
	width: 0;
	height: 0;
    border: 4px solid transparent;
	border-top: 6px solid #0076A4;
}