CSS Tooltip

by allen Yu

HTML

<h2>
    </h2>
<hr />
<div class="dvmain">
  <span>顯示文字</span>
  <span class="tooltip">tooltip</span>
</div>

CSS

.dvmain {
  position: relative;
  width: 65px;
  height: 25px;
}

.dvmain:hover .tooltip {
  display: inline-block;
}

.tooltip {
  display: none;
  position: absolute;
  bottom: 30px;
  left: 5px;
  width: 55px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  text-align: center;
  color: black;
  background: #f7f8f8;
  border: 1px solid #c9caca;
  border-radius: 0px;
  /**/
  text-shadow: rgba(0, 0, 0, 0.09804) 1px 1px 1px;
  box-shadow: rgba(0, 0, 0, 0.09804) 1px 1px 2px 0px;
}