css - 根据元素自动定位 CSS 工具提示？

Question

我构建了这个 CSS 工具提示:

DEMO

CSS:

.help {
    position: relative
}

.help .help-text {
    display: none;
    background-color: #FDFCEF;
    border: 1px solid #E8E5C1;
    border-radius: 4px;
    color: #333;
    font-size: 12px;
    font-weight: 400;
    padding: 5px;
    white-space: normal;
    position: absolute;
    z-index: 1000;
    box-shadow: 0 1px 3px 3px rgba(0, 0, 0, .05);
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    margin-left: 60px;
    margin-top: 12px;
    line-height: 1.2
}

.help .help-text:after,
.help .help-text:before {
    bottom: 100%;
    left: 50%;
    left: 13%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.help .help-text:after {
    border-color: transparent transparent #FDFCEF;
    border-width: 8px;
    margin-left: -8px
}

.help .help-text:before {
    border-color: transition transition #E8E5C1;
    border-width: 10px;
    margin-left: -10px
}

.help:hover .help-text {
    display: block
}

.help-text {
    width: 185px
}

.help-icon {
    padding-left: 3px;
    color: #789cbf;
    font-size: .9em!important;
    vertical-align: 0!important;
    cursor: help
}

.other {
    display: inline
}

p.inline {
    display: inline-block
}

.inline {
    display: inline-block
}

.box {
    font-size: .65em;
    color: #FFF;
    background-color: #00cc4f;
    font-weight: 700;
    width: 97px;
    height: 18px;
    padding-top: 3px;
    margin-top: 5px;
    padding-bottom: 4px;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    cursor: help
}

HTML:

  <table border="1">
    <col style="width:128px;" />
    <col style="width:216px;" />
    <col style="width:280px;" />   
            <thead>
      <tr>
        <th>4</th>
        <th>5</th>
        <th>6</th>
      </tr>
    </thead>
    <tbody>
       <tr>
        <td>
            <p class="inline">Sample A</p><span class="help"><span class="fa fa-question-circle fa-lg help-icon"></span><div class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div></span>

               <span class="help"><div class="box">SAMPLE BOX</div><div class="help-text">im ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.</div></span>


            <div>aaa</div>                                                
            <div class="other">Sample B</div><span class="help"><span class="fa fa-question-circle fa-lg help-icon"></span><div class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.</div></span>                    
        </td>
        <td>
        </td>
        <td><ul>
              <li class="inline">Another Sample: C</li>
              <span class="help">
              <span class="fa fa-question-circle fa-lg help-icon"></span>
              <div class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
              </span>
              <li class="inline">Yet Another Great Sample - D:</li>
              <span class="help">
              <span class="fa fa-question-circle fa-lg help-icon"></span>
              <div class="help-text">r sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dol ssssssssssssssss</div>
              </span>      
              </ul>
        </td>
      </tr>     
     </tbody>
  </table>

如您所见，每个样本的定位都不同。

我希望它根据包含提示的元素进行定位。

此外，这段代码是一种好的做法吗？它在平板电脑上也能正常工作吗？还是我应该做一些修改？

此外，使用基于 java 脚本的工具提示是否更好？如果有，哪个最接近我现在的？

Answer 1

改变你的 margin-left: 60px; margin-top: 12px; to left: -15px;顶部:计算(100% + 5px)；

我还更正了将 span 作为 ul 的直接子项的语法错误

.help {
    position: relative
}

.help .help-text {
    display: none;
    background-color: #FDFCEF;
    border: 1px solid #E8E5C1;
    border-radius: 4px;
    color: #333;
    font-size: 12px;
    font-weight: 400;
    padding: 5px;
    white-space: normal;
    position: absolute;
    z-index: 1000;
    box-shadow: 0 1px 3px 3px rgba(0, 0, 0, .05);
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    left: -15px;
    top: calc(100% + 5px);
    line-height: 1.2
}

.help .help-text:after,
.help .help-text:before {
    bottom: 100%;
    left: 50%;
    left: 13%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.help .help-text:after {
    border-color: transparent transparent #FDFCEF;
    border-width: 8px;
    margin-left: -8px
}

.help .help-text:before {
    border-color: transition transition #E8E5C1;
    border-width: 10px;
    margin-left: -10px
}

.help:hover .help-text {
    display: block
}

.help-text {
    width: 185px
}

.help-icon {
    padding-left: 3px;
    color: #789cbf;
    font-size: .9em!important;
    vertical-align: 0!important;
    cursor: help
}

.other {
    display: inline
}

p.inline {
    display: inline-block
}

.inline {
    display: inline-block
}

.box {
    font-size: .65em;
    color: #FFF;
    background-color: #00cc4f;
    font-weight: 700;
    width: 97px;
    height: 18px;
    padding-top: 3px;
    margin-top: 5px;
    padding-bottom: 4px;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    cursor: help
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
      <table border="1">
        <col style="width:128px;" />
        <col style="width:216px;" />
        <col style="width:280px;" />   
                <thead>
          <tr>
            <th>4</th>
            <th>5</th>
            <th>6</th>
          </tr>
        </thead>
        <tbody>
           <tr>
            <td>
                <p class="inline">Sample A</p><span class="help"><span class="fa fa-question-circle fa-lg help-icon"></span><div class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div></span>
                
                   <span class="help"><div class="box">SAMPLE BOX</div><div class="help-text">im ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.</div></span>
                  
                  
                <div>aaa</div>                                                
                <div class="other">Sample B</div><span class="help"><span class="fa fa-question-circle fa-lg help-icon"></span><div class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.</div></span>                    
            </td>
            <td>
            </td>
            <td><ul>
                  <li class="inline">Another Sample: C
                  <span class="help">
                  <span class="fa fa-question-circle fa-lg help-icon"></span>
                  <div class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
                  </span></li>
                  <li class="inline">Yet Another Great Sample - D:
                  <span class="help">
                  <span class="fa fa-question-circle fa-lg help-icon"></span>
                  <div class="help-text">r sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dol ssssssssssssssss</div>
                  </span></li>
                  </ul>
            </td>
          </tr>     
         </tbody>
      </table>