css3提示框效果测试实例

/**
 * CSS3 Tips
 *
 * A stylesheet for creating tooltips without using anything other than CSS3.
 *
 * created by c.bavota
 * released under GPL v2
 *
 * November 6th, 2013
 */
[data-tips] {
 position: relative;
 text-decoration: none;
}

 [data-tips]:after,
 [data-tips]:before {
     position: absolute;
     z-index: 100;
  opacity: 0;
 }

  [data-tips]:after {
   content: attr(data-tips);
   height: 25px;
   line-height: 25px;
   padding: 0 10px;
   font-size: 12px;
   text-align: center;
   color: #fff;
   background: #222;
   border-radius: 5px;
   text-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
   -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
   box-shadow: 0 0 5px rgba(0,0,0,0.3);
   white-space: nowrap;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
  }

  [data-tips]:before {
   content: "";
   width: 0;
   height: 0;
   border-width: 6px;
   border-style: solid;
  }

   [data-tips]:hover:after,
   [data-tips]:hover:before {
    opacity: 1;
   }

/* Top tips */
[data-tips].top-tip:after,
[data-tips].top-tip:before {
    -webkit-transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
    -moz-transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
    transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
 bottom: 90%;
 left: -9999px;
 margin-bottom: 12px;
}

 [data-tips].top-tip:before {
  border-color: #222 transparent transparent transparent;
  margin-bottom: 0;
 }

 [data-tips].top-tip:hover:after,
 [data-tips].top-tip:hover:before {
  bottom: 100%;
  left: 0;
 }

 [data-tips].top-tip:hover:before {
  left: 15px;
 }

/* Bottom tip */
[data-tips].bottom-tip:after,
[data-tips].bottom-tip:before {
    -webkit-transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
    -moz-transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
    transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
 top: 90%;
 left: -9999px;
 margin-top: 12px;
}

 [data-tips].bottom-tip:before {
  border-color: transparent transparent #222 transparent;
  margin-top: 0;
 }

 [data-tips].bottom-tip:hover:after,
 [data-tips].bottom-tip:hover:before {
  top: 100%;
  left: 0;
 }

 [data-tips].bottom-tip:hover:before {
  left: 15px;
 }

/* Left tip */
[data-tips].left-tip:after,
[data-tips].left-tip:before {
    -webkit-transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
    -moz-transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
    transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
 top: -9999px;
 left: 96%;
 margin-left: 12px;
}

 [data-tips].left-tip:before {
  border-color: transparent #222 transparent transparent;
  margin-left: 0;
 }

 [data-tips].left-tip:hover:after,
 [data-tips].left-tip:hover:before {
  left: 100%;
  top: 0;
 }

 [data-tips].left-tip:hover:before {
  top: 7px;
 }

/* Right tip */
[data-tips].right-tip:after,
[data-tips].right-tip:before {
    -webkit-transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
    -moz-transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
    transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
 top: -9999px;
 right: 96%;
 margin-right: 12px;
}

 [data-tips].right-tip:before {
  border-color: transparent transparent transparent #222;
  margin-right: 0;
 }

 [data-tips].right-tip:hover:after,
 [data-tips].right-tip:hover:before {
  right: 100%;
  top: 0;
 }

 [data-tips].right-tip:hover:before {
  top: 7px;
 }