body {

  margin-top: 100px;

}

​

.tool-tip {

  text-align:center;

  position: absolute;

  -webkit-box-sizing: border-box;

     -moz-box-sizing: border-box;

          box-sizing: border-box;

  padding: 7px 12px;

  border: 1px solid #dbdbdb;

  -webkit-border-radius: 12px;

     -moz-border-radius: 12px;

          border-radius: 12px;

  background: #fff;

  -webkit-box-shadow: 0 1px 0 rgba(14,16,16,.39);

     -moz-box-shadow: 0 1px 0 rgba(14,16,16,.39);

          box-shadow: 0 1px 0 rgba(14,16,16,.39);  

}

​

.tool-tip:after,

.tool-tip:before {

    position: absolute;

    bottom: 100%;

    width: 0;

    height: 0;

    border: solid transparent;

    content: " ";

    pointer-events: none;

}

​

.tool-tip:after {

    left: 50%;

    margin-left: -10px;

    border-width: 10px;

    border-bottom-color: #fff;

}

.tool-tip:before {

    left: 50%;

    margin-left: -11px;

    border-width: 11px;

    border-bottom-color: #dbdbdb;

}