html - 使 CSS 悬停工具提示超出其父级范围

问题描述

我需要一个带有样式的悬停工具提示的<thead>图标table。基本上，当用户将鼠标悬停在图标上时，我的悬停工具提示就会出现，但是，工具提示文本的下半部分位于<tbody>数据下方。

我相当确定我的问题纯粹是css基于，并且与表格的样式由DataTables. 这z-index似乎不是问题，因为我尝试使用它但没有成功。我认为工具提示不希望能够在<thead>其父级之外显示，因为它以<thead>.

我创建了一个显示问题的TryIt 编辑器，在这里。

而且，由于我不知道这些TryIt 编辑器URL 会持续多久（我假设不会永远存在），因此我还包括一些示例代码，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Hover Over Issue Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" type="text/javascript"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
  <script>
    $(document).ready(function() {
        $('#styledtable').DataTable({
            "destroy" : true,
            "scrollY" : 300,
            "scrollCollapse" : true,
            "paging" : true,
            "autoWidth" : true,
            "ordering" : true,
            "searching" : false,
            "order" : [ [ 0, 'asc' ] ],
            "pageLength" : 20,
            "lengthChange" : false,
            "pagingType" : "full_numbers",
            "dom" : '<"top"ip>rt<"bottom"fl><"clear">'
        });
    });
   </script>

   <style>
      .mySpecialTooltip {
            position: relative;
            display: inline-block;
            float: right; 
            top: 0px; 
            right: 0px; 
            cursor: pointer;
      }

      .mySpecialTooltip span {
          visibility: hidden;
          width: 200px;
          background-color: black;
          color: white;
          text-align: left;
          padding: 5px 5px;
          border-radius: 6px;
          white-space: normal;
          font-weight: normal;
          font-size: 12px;
          position: absolute;
          z-index: 2;
          top: 100%;
          left: 50%;
          margin-left: -200px;
      }

      .mySpecialTooltip:hover span {
          visibility: visible;
      }
   </style>
</head>
<body>

<div class="container">
  <h2>Hover Over Issue Example</h2>
  <p>I need the hover overs on the top right column icons to show up entirely. Hover over the <b>small orange exclamation mark icon</b> which looks like <img src="https://cdn3.iconfinder.com/data/icons/tiny-icons/warning.png"/> above the <b>email</b> header for an example of the problem.</p>            
  <table class="table" id="styledtable">
    <thead>
      <tr>
        <th style="border: 0px; !important"></th>
        <th style="border: 0px; !important"></th>
        <th style="border: 0px; !important">
          <div class="mySpecialTooltip">
            <img src="https://cdn3.iconfinder.com/data/icons/tiny-icons/warning.png" style="cursor: pointer;"/>
                <span>
                    This is some hover over text. It can be long - long enough that it needs to be able to 
                    float over the data in the top rops of the table. So I will just keep typing to ensure
                    that this box is very long. This is probably long enough.
                </span>
          </div>
        </th>
      </tr>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

任何帮助将不胜感激！

标签： htmlcssdatatables

html - 使 CSS 悬停工具提示超出其父级范围

问题描述

解决方案

推荐阅读