保持父容器內的工具提示？

Question

我不能找出一種方法來保持「主要內容」容器內的工具提示。下面的代碼：

.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; 
 
}

<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>

有什麼辦法來推回裏面？

或添加最大寬度的工具提示不知何故？我試圖添加最大寬度，但它不起作用，因爲[data-tooltip]的display:inline;。

（我知道，與「塊」代替「內聯」將解決最大寬度的問題，但我不能這樣做，因爲我需要保持文本內聯......）

Answer 1

別噸知道如何使它的詞響應，不知道是否甚至可能只有CSS - 工具提示是短的mesages。

但它是一個開始

.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>