纯CSS实现的帮助提示信息效果

本文要分享的就是我们常见到的提示信息工具tooltip,它能够为我们的页面提供非常漂亮的提示信息,让内容更加直观,提升用户的体验。我们可以在网上查到很多关于tooltip的文章,大多数是提供基于javascript的插件,而本文我们要讲的是一个只需要CSS代码,无需任何插件就能实现的漂亮、简单、使用的信息提示Tooltip。

HTML

首先第一步我们准备提示工具的提示内容html结构:

  <div class="help-tip"> 
    <p>这是一个纯CSS制作,基于CSS3实现的提示信息效果</p>  </div>  

代码<p>中的内容将作为一个块展示提示信息,而.help-tip将会包含一个带问号的小圆圈效果。

代码<p>中的内容默认是不显示的,当鼠标滑向问号时,通过CSS才能展示提示信息,它可以包含文字、图片、链接等各种html代码。具体可以看演示DEMO。

CSS

所有的CSS都写在一个style.css文件中,大家可以下载文件包查看,下面介绍下主要核心的CSS代码:

  .help-tip{ 
    position: absolute; 
    top: 18px; 
    right: 18px; 
    text-align: center; 
    background-color: #BCDBEA; 
    border-radius: 50%; 
    width: 24px; 
    height: 24px; 
    font-size: 14px; 
    line-height: 26px; 
    cursor: default; 
} 
  .help-tip:before{ 
    content:’?’; 
    font-weight: bold; 
    color:#fff; 
} 
  .help-tip:hover p{ 
    display:block; 
    transform-origin: 100% 0%; 
 
    -webkit-animation: fadeIn 0.3s ease-in-out; 
    animation: fadeIn 0.3s ease-in-out; 
 
} 
  .help-tip p{ 
    display: none; 
    text-align: left; 
    background-color: #1E2021; 
    padding: 20px; 
    width: 300px; 
    position: absolute; 
    border-radius: 3px; 
    box-shadow: 1px 1px 1px rgba(0000.2); 
    right: -4px; 
    color: #FFF; 
    font-size: 13px; 
    line-height: 1.4; 
} 
  .help-tip p:before{ 
    position: absolute; 
    content: ’’; 
    width:0; 
    height: 0; 
    border:6px solid transparent; 
    border-bottom-color:#1E2021; 
    right:10px; 
    top:-12px; 
} 
  .help-tip p:after{ 
    width:100%; 
    height:40px; 
    content:’’; 
    position: absolute; 
    top:-40px; 
    left:0; 
} 
 
@-webkit-keyframes fadeIn { 
    0% {  
        opacity:0;  
        transform: scale(0.6); 
    } 
 
    100% { 
        opacity:100%; 
        transform: scale(1); 
    } 
} 
  @keyframes fadeIn { 
    0% { opacity:0; } 
    100% { opacity:100%; } 
}  

代码中使用了CSS3的很多特性,使用了:before伪类创建问号,使用了border-radius: 50%创建问号背后的圆圈,省去了制作图片的麻烦,代码中还是用了css3动画效果,透明度变化等等。

值得注意的是,我们将.help-tip的position设置为absolute,是针对它的父级元素.demo的position属性为relative。这样才能保证元素间的定位。

您可以选择一种方式赞助本站

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: