固定寬度 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>