mtandre/tooltip.html

## tooltip.html
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>tooltip</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
        .button {
            border: 1px solid gray;
            display: inline-block;
        }
        .button:hover {
            cursor: pointer;
        }
        .tooltip {
            position: absolute;
            display: block;
            z-index: 2;
            visibility: hidden;
            opacity: 0;
            transition: opacity .2s linear;
            margin-top: 10px;
            margin-left: -20px;
            top:0;
            left:0;
        }
        .tooltip-open {
             visibility: visible;
             opacity: 1;
        }
        .tooltip-inner {
            position: relative;
            background: #fff;
            border: 1px solid #bbb;
        }
        .tooltip-inner:after, .tooltip-inner:before {
            bottom: 100%;
            left: 20px;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }
        .tooltip-inner:after {
            border-color: rgba(255, 255, 255, 0);
            border-bottom-color: #fff;
            border-width: 10px;
            margin-left: -10px;
        }
        .tooltip-inner:before {
            border-color: rgba(0, 0, 0, 0);
            border-bottom-color: #aaa;
            border-width: 11px;
            margin-left: -11px;
        }
        </style>
    </head>
    <body>

        <div class="button js-tooltip" data-tooltip="nav1">click here</div>
        <div class="tooltip" data-tooltipid="nav1">
            <div class="tooltip-inner">
                <ul>
                    <li class="blue">News</li>
                    <li class="blue">Watchdog</li>
                    <li class="blue active">Opinion</li>
                    <li class="blue">Sports</li>
                    <li class="blue">Business</li>
                    <li class="blue">Food</li>
                    <li class="blue">Entertainment</li>
                    <li class="blue">Lifestyle</li>
                    <li class="green">Green Sheet</li>
                    <li class="red">Marketplace</li>
                    <li class="red">Jobs</li>
                    <li class="red">Autos</li>
                    <li class="red">Homes</li>
                </ul>
            </div>
        </div>


        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script>

        $(".js-tooltip").on('click', function() {

            // get click target
            var item = $(this);

            // get related tooltip name
            var tooltiptext = item.data('tooltip');

            // generate selector based on tooltip name
            var selector = '.tooltip[data-tooltipid=' + tooltiptext + ']';

            if ( item.hasClass('open') ) { // hide tooltip

                // mark tooltip as closed
                item.removeClass('open');

                // hide tooltip
                $(selector).removeClass('tooltip-open');

            } else {  // show tooltip

                // mark tooltip as open
                item.addClass('open');

                // get bottom of click target
                var top = ( item.offset().top + item.outerHeight() );

                // get center of click target
                var left = ( item.offset().left + ( item.outerWidth() / 2 ) );

                // set style values of tooltip and display it
                $(selector).addClass('tooltip-open').css( {top: (top + 'px'), left: (left + 'px')} );

            }

        });

        </script>
    </body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>tooltip</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	.button {
	border: 1px solid gray;
	display: inline-block;
	}
	.button:hover {
	cursor: pointer;
	}
	.tooltip {
	position: absolute;
	display: block;
	z-index: 2;
	visibility: hidden;
	opacity: 0;
	transition: opacity .2s linear;
	margin-top: 10px;
	margin-left: -20px;
	top:0;
	left:0;
	}
	.tooltip-open {
	visibility: visible;
	opacity: 1;
	}
	.tooltip-inner {
	position: relative;
	background: #fff;
	border: 1px solid #bbb;
	}
	.tooltip-inner:after, .tooltip-inner:before {
	bottom: 100%;
	left: 20px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	}
	.tooltip-inner:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #fff;
	border-width: 10px;
	margin-left: -10px;
	}
	.tooltip-inner:before {
	border-color: rgba(0, 0, 0, 0);
	border-bottom-color: #aaa;
	border-width: 11px;
	margin-left: -11px;
	}
	</style>
	</head>
	<body>

	<div class="button js-tooltip" data-tooltip="nav1">click here</div>
	<div class="tooltip" data-tooltipid="nav1">
	<div class="tooltip-inner">
	<ul>
	<li class="blue">News</li>
	<li class="blue">Watchdog</li>
	<li class="blue active">Opinion</li>
	<li class="blue">Sports</li>
	<li class="blue">Business</li>
	<li class="blue">Food</li>
	<li class="blue">Entertainment</li>
	<li class="blue">Lifestyle</li>
	<li class="green">Green Sheet</li>
	<li class="red">Marketplace</li>
	<li class="red">Jobs</li>
	<li class="red">Autos</li>
	<li class="red">Homes</li>
	</ul>
	</div>
	</div>


	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script>

	$(".js-tooltip").on('click', function() {

	// get click target
	var item = $(this);

	// get related tooltip name
	var tooltiptext = item.data('tooltip');

	// generate selector based on tooltip name
	var selector = '.tooltip[data-tooltipid=' + tooltiptext + ']';

	if ( item.hasClass('open') ) { // hide tooltip

	// mark tooltip as closed
	item.removeClass('open');

	// hide tooltip
	$(selector).removeClass('tooltip-open');

	} else { // show tooltip

	// mark tooltip as open
	item.addClass('open');

	// get bottom of click target
	var top = ( item.offset().top + item.outerHeight() );

	// get center of click target
	var left = ( item.offset().left + ( item.outerWidth() / 2 ) );

	// set style values of tooltip and display it
	$(selector).addClass('tooltip-open').css( {top: (top + 'px'), left: (left + 'px')} );

	}

	});

	</script>
	</body>
	</html>