需要帮助将工具提示放置在标签右侧

Question

我有 table 个属性信息，每个 header 都有一个工具提示。我需要将工具提示放置在标签的右侧，并垂直居中。我是 CSS 的初学者，并用它来操纵 html 元素。这是我的代码的 JSFiddle。这是一个大项目，所以我无法获得所有 css 以使其与包含的图片相匹配，但希望足够让你有大致的想法。

这是我的 table header 示例，如果您只需要看一眼的话。

<th rowspan="2" data-field="Address">
  <span>Property<br />address</span>
    <a style="position: relative; top: 25%; right: 0;" tabindex="0" role="button" 
      data-toggle="popover" data-container="body" data-trigger="hover click" 
      title="Property address" data-content="An all-inclusive list of properties associated 
      to your agreement">
        <span class="glyphicon glyphicon-question-sign info-popover"></span>
    </a>
</th>

http://jsfiddle.net/gsxb0c65

Answer 1

实现此目的的一种方法是使用 position。

您将从制作 <th style="position: relative;"> 开始，这将允许位于其中的项目遵守其自身的边界。

接下来，您可以将 <a> 放入内部并使其成为 position: absolute;，如下所示：

th > a {
    position: absolute;
    //these two rules put it vertically centered no matter what inside of the container
    top: 50%;
    transform: translateY(-50%);
    //and then set the right to however far you'd like it away from the right side of the <th>
    right: 20px;
}

您可能还想 text-align: center; <a>，因此图标始终按照您显示的方式位于其中心。但是这个规则应该能让你更接近你正在寻找的东西。

编辑： 为您 http://jsfiddle.net/2468jgew/

添加了对 fiddle 的更新

EDIT2: 这是另一个 Whosebug post 解释我为你制定的规则

需要帮助将工具提示放置在标签右侧

Need help placing tooltip to the right of label

html

css

html-table

tooltip