Tooltip气泡

Posted on Posted in css
Tips: 本文创建于2015年7月6日,已超过 2 年,内容或图片可能已经失效!

例子
?这是Tooltip气泡
html

  1. <span class="tooltip"><span class="tooltip-icon">?</span><span class="tip-content"><span class="tip-content-inner">这是Tooltip气泡</span></span></span>  

css

  1. .tooltip{  
  2.     position: relative;  
  3.     display: inline-block;  
  4.     margin-left: 5px;  
  5.     margin-right: 5px;  
  6.     height: 16px;  
  7.     line-height: 16px;  
  8.     vertical-align: middle;  
  9. }  
  10. .tooltip-icon{  
  11.     display: block;  
  12.     width: 14px;  
  13.     height: 14px;  
  14.     line-height: 14px;  
  15.     border: 1px solid #999;  
  16.     border-radius: 50%;  
  17.     font-size: 12px;  
  18.     font-weight: 700;  
  19.     font-family: "caption", Arial;  
  20.     text-align: center;  
  21. }  
  22. .tip-content{  
  23.     z-index: 999999;  
  24.     display: none;  
  25.     position: absolute;  
  26.     left: -5px;  
  27.     bottom: 30px;  
  28.     width: 240px;  
  29. }  
  30. .tip-content-inner{  
  31.     position: absolute;  
  32.     bottom: 0;  
  33.     left: 0;  
  34.     display: block;  
  35.     width: auto;  
  36.     max-width: 200px;  
  37.     padding: 10px;  
  38.     line-height: 20px;  
  39.     border: 1px solid #B4CA34;  
  40.     background: #A0AF2D;  
  41.     line-height: 20px;  
  42.     color: #333;  
  43.     font-size: 16px;  
  44.     border-radius: 5px;  
  45. }  
  46. .tip-content-inner:before{  
  47.         content: "";  
  48.     position: absolute;  
  49.     left: 7px;  
  50.     bottom: -24px;  
  51.     border-style: solid solid solid solid;  
  52.     border-color: #B4CA34 transparent transparent transparent;  
  53.     border-width: 12px 6px;  
  54. }  
  55. .tip-content-inner:after{  
  56.     content: "";  
  57.     position: absolute;  
  58.     left: 8px;  
  59.     bottom: -20px;  
  60.     border-style: solid solid solid solid;  
  61.     border-color: #B4CA34 transparent transparent transparent;  
  62.     border-width: 10px 5px;  
  63. }  
  64. .tooltip:hover > .tip-content{  
  65.     display: block;  
  66. }  
» 转载请注明来源:若我若鱼 » Tooltip气泡

Leave a Reply

Your email address will not be published. Required fields are marked *

three × three =