Page Widget How to - Create tooltip Bubble

Question

We would like to know how to create tooltip Bubble.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.triangle-border {
  position: relative;
  padding: 15px;
  margin: 1em 0 3em;
  border: 5px solid #5a8f00;
  color: #333;
  background: #fff;
  /* css3 */<!--  w w w  . j  a  va 2  s .co m-->
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.triangle-border:before {
  content: "";
  position: absolute;
  bottom: -20px; /* value = - border-top-width - border-bottom-width */
  left: 40px; /* controls horizontal position */
  border-width: 20px 20px 0;
  border-style: solid;
  border-color: #5a8f00 transparent;
  /* reduce the damage in FF3.0 */
  display: block;
  width: 0;
}
/* creates the smaller  triangle */
.triangle-border:after {
  content: "";
  position: absolute;
  bottom: -13px; /* value = - border-top-width - border-bottom-width */
  left: 47px;
  /* value = (:before left) + (:before border-left) - (:after border-left) */
  border-width: 13px 13px 0;
  border-style: solid;
  border-color: #fff transparent;
  display: block;
  width: 0;
}
</style>
</head>
<body>
  <p class="triangle-border">this is a test.</p>
</body>
</html>

The code above is rendered as follows: