工具提示框，看起来怪怪当输入文本太长

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>