<div class="container">
  <a href="javascript:void(0)" tooltips="CoderExample" class="mouseover"> Mouseover to see the Tooltips</a>
    <a href="javascript:void(0)" tooltips="CoderExample" class="click"> Click to see the Tooltips</a>
  
  <p class="info"><a href="http://coderexample.com/css-click-event-and-attr/" target="_blank">See article  @coderexample.com<a/></p>
</div>

.container {
  margin:5% 32%;
}
.mouseover, .click {
  display:block;
  font-size:20px;
  text-decoration:none;
  color:#f83737;
  position:relative;
  margin-bottom:50px;
}
.mouseover:hover, .click:hover {
  text-decoration:underline;
}

.mouseover:hover:after {
  content: attr(tooltips);
  position:absolute;
  left:40px;
  top:-30px;
  display:block;
  font-size:16px;
  color:#fff;
  background:#333;
  padding:4px 10px;
  border-radius:5px;
}

.click:focus:after {
  content: attr(tooltips);
  position:absolute;
  left:25px;
  top:-30px;
  display:block;
  font-size:16px;
  color:#fff;
  background:#333;
  padding:4px 10px;
  border-radius:5px;
}



.info {
  text-align:center;
}
.info a {
  text-decoration:none;
  font-size:20px;
  color:#f4645f;
  font-weight:700;
}