时间戳

首页 > 解决方案 > 如何使 CSS 悬停工具提示在表格内显示自动位置（上、右、下、左）

html - 如何使 CSS 悬停工具提示在表格内显示自动位置（上、右、下、左）

问题描述

我正在使用 bootstrap4 和自定义 CSS，我想在 td 元素上显示一个工具提示并将其定位在 td 元素的位置的顶部或右侧或底部或左侧？在这里，您可以找到我的类，其中包含一个 HTML 文件和一个 CSS 文件，使其始终位于顶部。

在这里我附上我的代码链接给你： 这是我的 Codepen。

下面你会发现我的代码没有提供正确的解决方案。

这是一些 HTML 代码：

<div class="container">
    <div class="col-6">
        <table class="table table-responsive">
            <tr>
                <td class="CellWithComment">
                    S
                    <span class="CellComment">
                        010620190528113002
                        <br>
                            55555
                        <br>
                        2019-05-2804:25:37
                    </span>
                <td>
                <td class="CellWithComment">
                    S
                    <span class="CellComment">
                        010620190528113002
                        <br>
                            55555
                        </br>
                        2019-05-2804:25:37
                    </span>
                <td>
            </tr>
        </table>
    </div>
</div>

这是我的 CSS：

.CellWithComment {
 position: relative;
 }

.CellComment {
visibility: hidden;
background-color: black;
color: #fff;
text-align: left;
border-radius: 6px;
padding: 3px 7px;
position: absolute;
z-index: 1908;
bottom: 100%;
margin-left: -92px;
}
.CellComment::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}

.CellWithComment:hover span.CellComment {
 visibility: visible;
 }

标签： htmlcssbootstrap-4

解决方案

试试这个，我认为它对你有用。

.CellComment:after {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-bottom: 8px solid #000000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

.CellComment {
  visibility: hidden;
  background-color: black;
  color: #fff;
 text-align: left;
 border-radius: 6px;
 padding: 3px 7px;
 position: absolute;
 z-index: 1908;
 top: 100%;
}

推荐阅读