Question

我无法找到一种方法来将工具提示保留在＆＃34;主要内容＆＃34;容器。这是代码：

＆＃13;

.main-content {
  background: #151418;
  width: 500px;
  min-height: 200px;
}
[data-tooltip] {
  display: inline;
  position: relative;
  cursor: pointer;
}
[data-tooltip]:hover:after {
  background: rgba(0, 0, 0, .9);
  border-left: 5px solid #000;
  border-right: 5px solid #000;
  border-radius: 5px;
  position: absolute;
  bottom: 16px;
  left: 0;
  content: attr(data-tooltip);
  font-family: Consolas, "courier new";
  font-size: 12px;
  color: #657b99;
  padding: 5px 10px;
  z-index: 98;
  white-space: nowrap;
}
p {
  color: white;
  margin-left: 50px;
}

＆＃13;

<div class="main-content">
  <br>
  <br>
  <p>Hover mouse <span data-tooltip="Here goes a long text that does not stay inside main-content container">HERE</span></p>
</div>

＆＃13;

有没有办法把它推回去？

或者以某种方式为工具提示添加最大宽度？我尝试添加max-width，但由于[data-tooltip] display:inline;而无法正常工作。

（我知道更换＆＃34;内联＆＃34;使用＆＃34; block＆＃34;可以解决max-width的问题，但我不能这样做，因为我需要保留文本直列...）

Answer 1

不知道如何使它成为单词响应，不知道是否只有css才有可能 - 工具提示是短信息。

但这是一个开始

.main-content {
  background: #151418;
  width: 500px;
  min-height: 200px;
}
[data-tooltip] {
  display: inline;
  position: relative;
  cursor: pointer;
}
[data-tooltip]:hover:after {
     background: rgba(0, 0, 0, .9);
    border-left: 5px solid #000;
    border-right: 5px solid #000;
    border-radius: 5px;
    position: absolute;
    bottom: 16px;
    left: 0;
    content: attr(data-tooltip);
    font-family: Consolas, "courier new";
    font-size: 12px;
    color: #657b99;
    padding: 5px 10px;
    z-index: 98;
    /* width: 250px; */
    min-width: 200px;
    /* max-width: 400px; */
    height: 50px;
    overflow: auto;
}
p {
  color: white;
  margin-left: 50px;
}

<div class="main-content">
  <br>
  <br>
  <p>Hover mouse <span data-tooltip="Here goes a long text that does not stay inside main-content container">HERE</span></p>
</div>

将工具提示保留在父容器中？

1 个答案: