固定宽度 div 中包含的绝对 div 的可变宽度

Question

我有一个<div> display:table 设置，它在固定宽度的列中有一个“帮助”图标。当我将鼠标悬停在图标上时，会出现工具提示，允许用户也将鼠标悬停在工具提示上（其中可能包含超链接）。

问题是工具提示是根据固定单元格的宽度显示的，这意味着内容是基于单元格的 20px 宽度的自动换行的。工具提示是可变长度和可能多行。

这就是我目前所拥有的......

.table {
  display:table;
  width:100%;
  border-collapse:collapse;
}
.row {
  display:table-row;
}
.cell {
  display:table-cell;
  border:1px solid #888;
  padding:5px;
}
.tooltip {
  position:relative;
  width:20px;
}
.tooltip > div::before {
  content:"";
  position:absolute;
  top:0;
  left:-30px;
  height:20px;
  width:30px;
  background-color:transparent;
}
.tooltip > div {
  display:none;
  position: absolute;
  float: left;
  top: 0px;
  left: 30px;
  border: solid 1px #a0a0a0;
  background-color: #ffffff;
  padding: 2px 4px;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}
.tooltip:hover > div {
  display:block;
}
.tooltip > div p {
  margin:0;
}

<p>Hover over the X to show the tooltip... you should be able to move the mouse over the tooltip, and the tooltip should disappear when the mouse moves out of the tooltip or the X...</p>
<div class="table">
  <div class="row">
    <div class="cell tooltip">
      <i>X</i>
      <div>
        <p>
          Hello world hello world
        </p>
      </div>
    </div>
    <div class="cell">
      This is a whole load of other text
    </div>
  </div>
</div>

如果没有为工具提示使用固定宽度，如何使弹出窗口可变宽度，并且仍然能够通过向右移动鼠标“退出”工具提示？

这里是一个额外嵌套的<div> 和固定宽度500px 的相同示例，这意味着变量内容显示正确。但是您会看到当鼠标向右移动时工具提示并没有消失，因为它仍然悬停在固定的 500px 宽度容器上...

（注意，我在固定宽度的容器上添加了背景颜色以突出显示“悬停”区域）

.table {
  display:table;
  width:100%;
  border-collapse:collapse;
}
.row {
  display:table-row;
}
.cell {
  display:table-cell;
  border:1px solid #888;
  padding:5px;
}
.tooltip {
  position:relative;
  width:20px;
}
.tooltip > div::before {
  content:"";
  position:absolute;
  top:0;
  left:-30px;
  height:20px;
  width:30px;
  background-color:transparent;
}
.tooltip > div {
  display:none;
  position: absolute;
  float: left;
  top: 0px;
  left: 30px;
  width:500px;
  /* NOTE, Added to highlight the fixed container area */
  background-color:rgba(127,127,255,0.4);
}
.tooltip:hover > div {
  display:block;
}
.tooltip > div > div {
  display:inline-block;
  border: solid 1px #a0a0a0;
  background-color: #ffffff;
  padding: 2px 4px;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}
.tooltip > div > div p {
  margin:0;
}

<p>Hover over the X to show the tooltip... you should be able to move the mouse over the tooltip, and the tooltip should disappear when the mouse moves out of the tooltip or the X...</p>
<div class="table">
  <div class="row">
    <div class="cell tooltip">
      <i>X</i>
      <div>
        <div> <!-- Note, extra nested div -->
          <p>
            Hello world hello world
          </p>
        </div>
      </div>
    </div>
    <div class="cell">
      This is a whole load of other text
    </div>
  </div>
</div>

有没有什么方法可以在不需要固定宽度<div>的情况下显示可变长度工具提示？

---

注意，我添加了一个使用 jQuery 的答案，但如果有人知道，我更喜欢纯 CSS 解决方案

Answer 1

虽然我更喜欢纯 CSS 的结果，但我提出了一个需要 javascript（或在我的情况下为 jQuery）的解决方案，以便它根据显示点的内容自动更改宽度......

$(function() {
  $(".tooltip").on("mouseenter", function(e) {
    // Get the inner <div> container
    var $div = $(this).children("div");
    // If we haven't already worked it out
    if (!$div.data("widthset")) {
      // Set the width of the container to width of the contents, and set as worked out
      $div.css("width", $div.children("div").outerWidth(true) + "px").data("widthset", true);
    }
  });
});

在这里你可以看到它的实际应用......

$(function() {
      $(".tooltip").on("mouseenter", function(e) {
        // Get the inner <div> container
        var $div = $(this).children("div");
        // If we haven't already worked it out
        if (!$div.data("widthset")) {
          // Set the width of the container to width of the contents, and set as worked out
          $div.css("width", $div.children("div").outerWidth(true) + "px").data("widthset", true);
          console.log($div.css("width"));
        }
      });
    });

.table {
  display:table;
  width:100%;
  border-collapse:collapse;
}
.row {
  display:table-row;
}
.cell {
  display:table-cell;
  border:1px solid #888;
  padding:5px;
}
.tooltip {
  position:relative;
  width:20px;
}
.tooltip > div::before {
  content:"";
  position:absolute;
  top:0;
  left:-30px;
  height:20px;
  width:30px;
  background-color:transparent;
}
.tooltip > div {
  display:none;
  position: absolute;
  float: left;
  top: 0px;
  left: 30px;
  width:500px;
  /* NOTE, Added to highlight the fixed container area */
  background-color:rgba(127,127,255,0.4);
}
.tooltip:hover > div {
  display:block;
}
.tooltip > div > div {
  display:inline-block;
  border: solid 1px #a0a0a0;
  background-color: #ffffff;
  padding: 2px 4px;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}
.tooltip > div > div p {
  margin:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Hover over the X to show the tooltip... you should be able to move the mouse over the tooltip, and the tooltip should disappear when the mouse moves out of the tooltip or the X...</p>
<div class="table">
  <div class="row">
    <div class="cell tooltip">
      <i>X</i>
      <div>
        <div> <!-- Note, extra nested div -->
          <p>
            Hello world hello world
          </p>
        </div>
      </div>
    </div>
    <div class="cell">
      This is a whole load of other text
    </div>
  </div>
  <div class="row">
    <div class="cell tooltip">
      <i>X</i>
      <div>
        <div> <!-- Note, extra nested div -->
          <p>
            Lots and lots of tooltip text, which is really long and should in theory, if I keep typing long enough, cause the line to extend over the 500px onto the next line
          </p>
          <p>
            And also include a new paragaph as well
          </p>
        </div>
      </div>
    </div>
    <div class="cell">
      And this is a whole load more text to give another example row, and show via the console that the width is only worked out once
    </div>
  </div>
</div>