如何使用jquery制作帮助框

How to make a help box with jquery

本文关键字：帮助 何使用 jquery      更新时间：2023-09-26

在许多网站中，都有带有input [?]帮助框，当悬停显示/弹出一小框帮助/信息时。我发现它们是用java script和jquery制成的.但是，如何？

尝试以下代码

.HTML 

<div class="wrap">Welcome <span class="wrapper">[?]<span class="tooltip">I am a tooltip!</span>

.CSS

.wrap{
    margin-top: 100px;
}
.wrapper {
  text-transform: uppercase;
  cursor: help;
  position: relative;
  text-align: center;
}
.wrapper .tooltip {
  background: #1496bb;
  bottom: 100%;
  color: #fff;
  display: block;
  left: -25px;
  margin-bottom: 15px;
  opacity: 0;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  width: 200px;
}
.wrapper .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
} 
.wrapper:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

JSFIDDLE 演示

我认为您可能可以在没有任何 js 或 css 的情况下做到这一点，只需使用 span 标签和title属性即可。我创建了jsFiddle来展示它：http://jsfiddle.net/nowk7cqr/1/

This <span title="Need some help?"> [?] </span> is a tooltip.
相关文章：