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

时间：2016-07-11 12:13:13

标签： css tooltip

我已经构建了这个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脚本的工具提示是否更好？如果是这样，哪一个最接近我现在的那个？

3 个答案:

答案 0 :(得分：1)

将您的'static更改为margin-left: 60px; margin-top: 12px;

我还更正了将left: -15px; top: calc(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>

答案 1 :(得分：0)

在.fa-question-circle中设置.help-text。这样，帮助文本将相对于其父元素定位。然后你只需要将margin-left更改为-20px就可以了。

<div class="fa fa-question-circle fa-lg help-icon">
  <span class="help-text">r sit amet, </span>
 </div>

here是工作小提琴。前两个工具提示不变，另外两个是固定的。

答案 2 :(得分：0)

这似乎是你想要的：https://jsfiddle.net/x02exd59/3/。

首先我做了一些HTML更改。您的绝对定位元素（工具提示文本）将相对于其父元素显示。这意味着如果我们将glyphicon作为其父级，它将根据图标的位置显示。

其次，我检查了CSS以确保glyphicon有位置：relative;并且信息文本的位置：绝对;

第三，我使用top：和left：值微调了信息文本的位置。 （我还将你创建的箭头元素的位置改为左：25px。）

<强> 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><i class="help fa fa-question-circle fa-lg help-icon"><span 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.</span></i>

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


            <div>aaa</div>                                                
            <div class="other">Sample B<span class="help fa fa-question-circle fa-lg help-icon"><span 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.</span></span></div>                    
        </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>

<强> 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;
    left: 0px;
    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: -15px;
    margin-top: 12px;
    line-height: 1.2
}

.help .help-text:after,
.help .help-text:before {
    bottom: 100%;
    left: 50%;
    left: 25px;
    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
}
相关问题
最新问题