Tooltips > dynamic positioning

by navinleon

HTML

<div class="container">
  <div class="hotspot hotspot-1" data-opens="tooltip-1"></div>
  <div class="hotspot hotspot-2" data-opens="tooltip-2"></div>
  <div class="tooltip tooltip-1" data-tooltip-name="tooltip-1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis consectetur laoreet. Donec ac tortor felis. Nunc eu dui faucibus metus faucibus lacinia non quis dolor. Duis posuere interdum suscipit. Cras non mauris quis arcu elementum varius. Vivamus tincidunt elit cursus arcu euismod suscipit.
  </div>
  <div class="tooltip tooltip-2" data-tooltip-name="tooltip-2">
    Sed convallis consectetur laoreet.
  </div>
</div>

SCSS

.container {
  position: relative;
  width: 320px;
  height: 1000px;
  border: 1px solid #000;
}
.hotspot {
  position: absolute;
  height: 15px;
  width: 15px;
  background-color: #ccc;
  cursor: pointer;
}
.hotspot-1 {
  top: 1%;
  left: 50%;
}
.hotspot-2 {
  top: 25%;
  left: 30%;
}
.tooltip {
  display: none;
  position: absolute;
  top: 15%;
  width: calc(100% - 20px);
  background-color: #ccc;
  margin: 0 10px;
  padding: 20px;
  box-sizing: border-box;
  font-size: 12px;
}
.tooltip:after {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-bottom-color: #ccc;
	border-width: 16px;
	margin-left: -10px;
  transform: translateX(-25%);
}

JavaScript

var $tooltips = $('.tooltip');
$('body').on('click', '.hotspot', function(e){
	var $hotspot = $(this);
  var hotspotPos = $hotspot.position();
  var $tooltipToOpen = $tooltips
  	.filter('[data-tooltip-name='+ $hotspot.data('opens') +']');
  
  if( $tooltipToOpen.is(':hidden') ){
	  $('#tooltip-arrow-pos').remove();
    $tooltips.hide();
  	var hsLeft = hotspotPos.left;
    var hsTop = hotspotPos.top;
    var hsHeight = $hotspot.height();
	  $('<style id="tooltip-arrow-pos">.tooltip:after{left:'+ hsLeft +'px;}</style>').appendTo('head');
    $tooltipToOpen.css({
    	top: hsTop + hsHeight + 16 // 16 is height of tooltip's arrow
    });
  	$tooltipToOpen.show();
  } else {
  	//$tooltipToOpen.hide();
    $tooltips.hide();
    $('#tooltip-arrow-pos').remove();
  }
  
  
});