Tooltip

by dirtyd77

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div class="example">
    <p>Example #1:</p>
    
    <div class="tooltip">
        <div class="tooltip-header">
            <h3>Oct 22</h3>
        </div>
        
        <div class="tooltip-body">
            <div class="tooltip-body-textWrapper">
                <p>O: 455.92</p>
                <p>H: 456.22</p>
                <p>L: 452.11</p>
                <p>C: 454.17</p>
            </div>
        </div>
        
        <div class="downArrow"></div>
    </div>
</div>

<div class="example">
    <p>Example #2:</p>
    <div id="container" style="height: 300px"></div>
</div>

CSS

.tooltip, .tooltip *{
    padding: 0;
    margin: 0;
}

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

.tooltip > div{
    position: relative;
}

.tooltip-header{
    background: #0076A4;
    color: #ffffff;
    height: 25%;
    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: 16px;
}

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

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

.tooltip-body p{
    text-align: left;
    font-size: 16px;
}

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


/* css for jsfiddle */

#container{

}

.example{
    position: relative;
    height: 200px;
}

JavaScript

$(function () {
    var g1,
        options = {headerColor: '#0076A4',
		    bodyColor: '#F5FBFE',
		    arrowColor: '#0076A4',
                   borderColor: '#0076A4'};

    var renderer = new Highcharts.Renderer(
        $('#container')[0], 
        150,
        150
    );
// create the group
            g1 = renderer.g('tooltip')
                .attr({ 'zIndex': 455 })
                .add();
         

            // create the down arrow
            renderer.path().attr({
                d: 'M 27.5, 58.6 L 30.7, 58.6 L 29.1,61.4 L 27.5,64.2 L25.9,61.4 L24.3,58.6 Z',
                fill: options.arrowColor,
                stroke: options.borderColor,
                'stroke-width': 1
            }).add(g1);

            // create the body
            renderer.path().attr({
                d: 'M54.54,48.643c0,5.523-4.477,10-10,10H10.5 c-5.523,0-10-4.477-10-10V10.5c0-5.523,4.477-10,10-10H44.54c5.523,0,10,4.477,10,10V48.643z',
                fill: options.bodyColor,
                stroke: options.borderColor,
                'stroke-width': 1,
                'stroke-miterlimit': 10
            }).add(g1);

            // create the header (path)
            renderer.path().attr({
                d: 'M54.54,15.109H0.5V10.5c0-5.523,4.477-10,10-10H44.54c5.523,0,10,4.477,10,10V15.109z',
                fill: options.headerColor,
                'stroke-width': 1,
                'stroke-miterlimit': 10
            }).add(g1);
});