html css tooltip,CSS3 简单可复用的提示信息框（tooltip）

CSS

语言：

CSSSCSS

确定

* {

-moz-box-sizing: border-box;

box-sizing: border-box;

-webkit-font-smoothing: antialiased; }

body {

-moz-box-sizing: border-box;

box-sizing: border-box;

padding: 20px;

font-family: Helvetica;

background-color: #333; }

h1 {

text-align: center;

color: #fff;

font-size: 1.5rem; }

.p {

max-width: 400px;

margin: 0 auto;

padding: 20px 5px 0;

color: #fff;

line-height: 1.5rem;

font-size: 0.875rem;

font-weight: 300; }

ul {

max-width: 400px;

margin: 0 auto;

padding: 50px 0;

list-style: none; }

ul li {

width: 100px;

margin: 50px 0;

color: #fff;

font-weight: 300;

text-align: center;

text-decoration: none;

cursor: pointer; }

.tooltip, .tooltip--top, .first-ex, .tooltip--right, .second-ex, .tooltip--bottom, .third-ex, .tooltip--left, .fourth-ex {

position: relative; }

.tooltip::before, .tooltip--top::before, .first-ex::before, .tooltip--right::before, .second-ex::before, .tooltip--bottom::before, .third-ex::before, .tooltip--left::before, .fourth-ex::before {

content: '';

position: absolute;

width: 0;

height: 0;

border-style: solid;

opacity: 0;

-webkit-transition: all 200ms 500ms ease-in-out;

transition: all 200ms 500ms ease-in-out; }

.tooltip::after, .tooltip--top::after, .first-ex::after, .tooltip--right::after, .second-ex::after, .tooltip--bottom::after, .third-ex::after, .tooltip--left::after, .fourth-ex::after {

content: '';

position: absolute;

height: 16px;

max-height: 0;

opacity: 0;

border-radius: 8px;

overflow: hidden;

white-space: nowrap;

font-size: 0.75rem;

font-weight: 500;

line-height: 1rem;

padding: 3px 5px;

color: #333;

text-align: center;

background-color: #fff;

box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

-webkit-transition: all 200ms 500ms ease-in-out;

transition: all 200ms 500ms ease-in-out;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

-webkit-backface-visibility: hidden;

backface-visibility: hidden; }

.tooltip:hover::before, .tooltip--top:hover::before, .first-ex:hover::before, .tooltip--right:hover::before, .second-ex:hover::before, .tooltip--bottom:hover::before, .third-ex:hover::before, .tooltip--left:hover::before, .fourth-ex:hover::before {

opacity: 1; }

.tooltip:hover::after, .tooltip--top:hover::after, .first-ex:hover::after, .tooltip--right:hover::after, .second-ex:hover::after, .tooltip--bottom:hover::after, .third-ex:hover::after, .tooltip--left:hover::after, .fourth-ex:hover::after {

opacity: 1;

max-height: 99px; }

.tooltip--top::before, .first-ex::before {

top: -10px;

left: 50%;

margin-left: -4px;

border-width: 4px 5px 0;

border-color: #fff transparent transparent; }

.tooltip--top::after, .first-ex::after {

bottom: calc(100% + 10px);

left: 50%;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%); }

.tooltip--right::before, .second-ex::before {

top: 50%;

left: 100%;

margin-top: -4px;

border-width: 4px 5px 4px 0;

border-color: transparent #fff transparent transparent; }

.tooltip--right::after, .second-ex::after {

top: 50%;

left: calc(100% + 5px);

-webkit-transform: translateY(-50%);

-ms-transform: translateY(-50%);

transform: translateY(-50%); }

.tooltip--bottom::before, .third-ex::before {

top: calc(100% + 6px);

left: 50%;

margin-left: -4px;

border-width: 0 5px 4px;

border-color: transparent transparent #fff; }

.tooltip--bottom::after, .third-ex::after {

top: calc(100% + 10px);

left: 50%; }

.tooltip--left::before, .fourth-ex::before {

top: 50%;

left: -10px;

margin-top: -4px;

border-width: 4px 0 4px 5px;

border-color: transparent transparent transparent #fff; }

.tooltip--left::after, .fourth-ex::after {

top: 50%;

right: calc(100% + 10px);

-webkit-transform: translateY(-50%);

-ms-transform: translateY(-50%);

transform: translateY(-50%); }

.first-ex::after {

content: "Tooltip on the top"; }

.second-ex::after {

content: "Tooltip on the right"; }

.third-ex::after {

content: "Tooltip on the bottom"; }

.fourth-ex::after {

content: "Tooltip on the left"; }