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

Question

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

问题是工具提示是根据固定单元格的宽度显示的，这意味着内容是基于单元格的 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>