TOOLTIP AT LEFT

Run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
   body {
      text-align: center;
   }
  /* Tooltip container */
	.container{
		position: relative;
		display: inline-block;
		background: #F45678;
		
	}

	/* Tooltip  */
	.container .tooltip {
	    visibility: hidden;
		width: 100px;
		background-color: black;
		color: #fff;
		text-align: center;
		padding: 5px 0;
		border-radius: 6px;

	/* Position the tooltip  */
		position: absolute;
		z-index: 1;
		top: -5px;
		right: -105px;
	}

	/* Show the tooltip text when you mouse over the tooltip container */
	.container:hover .tooltip {
	   visibility: visible;
	}

</style>
</head>
<body>
    <h2> Adding tooltip to element </h2>
	<div class="container">Hover over me
	  <span class="tooltip">Tooltip text</span>
	</div>
</body>
</html>