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

Question

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

问题是工具提示是根据固定单元格的宽度显示的，这意味着内容是根据只有 20 像素的单元格宽度自动换行的。工具提示是 可变长度并且可能是多行 .

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

.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 的答案，但如果有人知道一个

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>

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

Variable width of absolute div contained within fixed-width div

html

css

tooltip