纯css实现悬浮文字提示框效果-html代码-BFW代码库

纯css实现悬浮文字提示框效果

代码语言：html

所属分类：悬停

代码描述：纯css实现悬浮文字提示框效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" type="image/png" href="https://static.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>CodePen - Pure-CSS Tooltips</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Audiowide);
html {
   box-sizing: border-box;
   font-family: Arial, sans-serif;
   font-size: 16px;
   font-weight: normal;
}

*,
*:before,
*:after {
   box-sizing: inherit;
}

html,
body {
   height: 100%;
   margin: 0;
   padding: 0;
   width: 100%;
}

span {
   color: #e91e63;
   font-family: monospace;
   white-space: nowrap;
}

span:after {
   font-family: Arial, sans-serif;
   text-align: left;
   white-space: normal;
}

span:focus {
   outline: none;
}

.wrap {
   background: #ECF0F1;
   color: #607D8B;
   height: 100%;
   overflow: auto;
   padding: 1em 2.5em;
   text-align: center;
   width: 100%;
}

h1 {
   color: #e91e63;
   font-family: "Audiowide", cursive;
   font-size: 2em;
   font-size: 7vw;
   font-weight: bold;
   line-height: 1.2;
   margin: 0.5em 0 2.5em;
   text-shadow: 1px 1px 1px #fefefe;
}

@media (min-width: 1075px) {
   h1 {
      font-size: 4.7em;
   }
}

pre {
   background: #fff;
   display: inline-block;
   font-size: .55em;
   margin-top: 2em;
   padding: 1em;
}

@media (min-width: 360px) {
   pre {
      font-size: .7em;
   }
}

@media (min-width: 500px) {
   pre {
      font-size: 1em;
   }
}


/*== start of code for tooltips ==*/
.tool {
    cursor: help;
    position: relative;
}


/*== common .........完整代码请登录后点击上方下载按钮下载查看