工具提示框，看起來怪怪當輸入文本太長

Question

我們有一個提示框，其CSS低於：

.radioButton-tooltip 
{ 
    position: absolute; 
    width: 205px; 
    padding: 5px 20px 5px 35px; 
    left: 100%; 
    margin-left: -17px; 
    font-size: 13px; 
    background: url(images/tooltip.png) 0 center no-repeat; 
    color: #ffffff; 
    display: none; 
    text-align:left; 
    z-index:100; 

} 
.radioButton-tooltip:before, .radioButton-tooltip:after, .radioButton-tooltip .before, .radioButton-tooltip .after 
{ 
    content: ''; 
    background-image: url(images/tooltip.png); 
    background-repeat: no-repeat; 
    height: 10px; 
    width: 100%; 
    display: block; 
    position: absolute; 
    left: 0; 
    z-index:100; 
} 

.radioButton-tooltip:before, .radioButton-tooltip .before 
{ 
    background-position: 0 top; 
    top: -10px; 
    z-index:100; 
} 

.radioButton-tooltip:after, .radioButton-tooltip .after 
{ 
    background-position: 0 bottom; 
    bottom: -10px; 
    z-index:100; 
} 

通常情況下，它工作正常。如圖所示：

然而，當文本變得很長，它看起來如下：

我不太清楚這是怎麼引起的，但我假設它是因爲文本太長，超出了原始tooltip.png的最大長度。但問題是我該如何解決這個問題？

謝謝。

Answer 1

我會建議使用純CSS與此，不要亂用圖像拼接/精靈。這是一個相當古老的技術。

.tool-tip { 
 
    left: 40px; 
 
    position: relative; 
 
    background: rgba(0,0,0,0.75); 
 
    border-radius: 10px; 
 
    border: 3px solid #fff; 
 
    box-shadow: 0 0 3px 1px rgba(0,0,0,0.3); 
 
    padding: 15px; 
 
    max-width: 250px; 
 
    color: #fff; 
 
    font: normal 100% Arial, sans-serif; 
 
} 
 
.tool-tip:after, .tool-tip:before { 
 
    position: absolute; 
 
    left: -15px; 
 
    top: calc(50% - 15px); 
 
    content: ""; 
 
    display: block; 
 
    width: 0; 
 
    height: 0; 
 
    width: 0; 
 
    height: 0; 
 
} 
 
.tool-tip:after { 
 
    border-top: 15px solid transparent; 
 
    border-bottom: 15px solid transparent; 
 
    border-right: 15px solid #444; 
 
} 
 
/*.tool-tip:before { 
 
    top: calc(50% - 18px); 
 
    left: -21px; 
 
    border-top: 18px solid transparent; 
 
    border-bottom: 18px solid transparent; 
 
    border-right: 18px solid #fff; 
 
}*/ 
 

 
.tool-tip:first-child { 
 
    margin-bottom: 25px; 
 
}

<div class="tool-tip"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu lorem sit amet erat pellentesque gravida. Cras scelerisque, lorem a feugiat blandit, risus eros interdum orci, non aliquet dui ex a ipsum. 
 
</div> 
 

 
<div class="tool-tip"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
</div>