tooltip template

by James Connolly

HTML

<div class="tooltip">
  <button class="tooltip-trigger">
    Download Options
  </button>
  <div class="tooltip-wrapper">
    <div class="tooltip-content">
      <ul>
        <li><a href="#">List Item</a></li>
        <li><a href="#">List Item</a></li>
      </ul>
    </div>
  </div>
</div>

SCSS

.tooltip {
  position: relative;
  background: skyblue;
}

.tooltip-wrapper {
	background: pink;
	position: relative;
	
	&.open .tooltip-content {
		opacity: 1;
		top: 10px;
	}
}

.tooltip-content {
	padding: 5px;
	background: gray;
	text-align: left;
	width: 100%;
	max-width: 300px;
	opacity: 0;
	transition: all 0.3s ease;
	position: absolute;
	left: 0;
	top: 25px;
	
	ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	
	a {
		display: block;
		padding: 5px;
	}
}

JavaScript

(function($) {

  $('.tooltip-trigger').click(function() {
    $(this).next().toggleClass('open');
  });

})(jQuery);