javascript - 工具提示显示 anchor 标记超出 td 元素

Question

我需要显示 HTML 中可用的每个链接的点击百分比
从数据库中动态获取的模板。我曾尝试显示点击 每个 anchor 链接的百分比将它们添加到 data-title 使用 jQuery 但是 问题是当我将鼠标悬停时，链接工具提示显示超出范围。能 只有当我悬停在 anchor 附近时，有人帮我显示工具提示
关联？或者请给我一个更好的解决方案.. 我在下面的 fiddler 链接中附上了所有示例代码请找到示例 fiddle 和代码。

JSFiddle

$(document).ready(function() {
   var anchors = [];
   $(this).find("a").each(function() {
     anchors.push($(this));
   });

   for (i = 0; i < anchors.length; i++) {
     var _ele = '100%'
     $(anchors[i]).attr('data-title', _ele);
   }
});

a {
  color: #900;
  text-decoration: none;
}
a:hover {
  color: red;
  position: relative;
}
a[data-title]:hover:before {
  width: 55px;
  content: attr(data-title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear, left top, left bottom, color- stop(0, #eeeeee), color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="1024" align="center" cellpadding="0" cellspacing="0" border="0" class="wrapper">
  <tbody>
    <tr>
      <td width="1024" class="wrapper">
        <table width="25%" align="left" cellpadding="0" cellspacing="0" border="0" class="series">
          <tbody>
            <tr>
              <td align="center">
                <a target="_blank" class="editorLinks tooltip" style="color: #000000; text-decoration: none;">
                  <div>
                    <img src="../../car_2series.jpg" width="90" height="44" alt="2 Series" border="0" style="display: block;">
                  </div>
                  <h3 style="margin: 15px 0 45px; margin-top: 15px; margin-bottom: 45px; color: #030000;
                                    font-family: Helvetica,Arial,sans-serif; font-size: 0.9em;">
                                    Car A</h3>
                </a>
              </td>
            </tr>
          </tbody>
        </table>

        <table width="25%" align="left" cellpadding="0" cellspacing="0" border="0" class="series">
          <tbody>
            <tr>
              <td align="center">
                <a target="_blank" class="editorLinks tooltip" style="color: #000000; text-decoration: none;">
                  <div>
                    <img src="../../../feb2015/car_4series.jpg" width="90" height="44" alt="4 Series" border="0" style="display: block;">
                  </div>
                  <h3 style="margin: 15px 0 45px; margin-top: 15px; margin-bottom: 45px; color: #030000;
                                    font-family: Helvetica,Arial,sans-serif; font-size: 0.9em;">
                                    Car B</h3>
                </a>
              </td>
            </tr>
          </tbody>
        </table>

      </td>
    </tr>
  </tbody>
</table>

<table width="1024" align="center" cellpadding="0" cellspacing="0" border="0" class="wrapper">
  <tbody>
    <tr>
      <td width="1024" class="wrapper">
        <table width="25%" align="left" cellpadding="0" cellspacing="0" border="0" class="series">
          <tbody>
            <tr>
              <td align="center">
                <a target="_blank" class="editorLinks tooltip" style="color: #000000; text-decoration: none;">
                  <div>
                    <img src="../../car_6series.jpg" width="90" height="44" alt="6 Series" border="0" style="display: block;">
                  </div>
                  <h3 style="margin: 15px 0 45px; margin-top: 15px; margin-bottom: 45px; color: #030000;
                                    font-family: Helvetica,Arial,sans-serif; font-size: 0.9em;">
                                   Car B</h3>
                </a>
              </td>
            </tr>
          </tbody>
        </table>
        <table width="25%" align="left" cellpadding="0" cellspacing="0" border="0" class="series">
          <tbody>
            <tr>
              <td align="center">
                <a target="_blank" class="editorLinks tooltip" style="color: #000000; text-decoration: none;" data-title="1/100%">
                  <div>
                    <img src="../../../car_7series.jpg" width="90" height="44" alt="7 Series" border="0" style="display: block;">
                  </div>
                  <h3 style="margin: 15px 0 45px; margin-top: 15px; margin-bottom: 45px; color: #030000;
                                    font-family: Helvetica,Arial,sans-serif; font-size: 0.9em;">
                                    7 Series</h3>
                </a>
              </td>
            </tr>
          </tbody>
        </table>


      </td>
    </tr>
  </tbody>
</table>

Answer 1

将它设置为 :after 以确保它的 z-index 总是大于它的父级。 在相对父级中使用绝对定位来控制位置

https://jsfiddle.net/Panomosh/6ywncLh3/3/