我在此页面上有一个工具提示:
http://www.cssportal.com/css-tooltip-generator/
我对其进行了修改以应用于输入元素:
<div class="tooltip">
<input type="text" placeholder="Nombre/s" name="dp_nombre">
<span>Nombre completo asd as dasd as dasd</span>
</div>
和CSS:
.tooltip {
position: relative;
display: inline;
}
.tooltip span {
position: absolute;
width: 120px;
color: #FFFFFF;
background: #327FBA;
min-height: 32px;
line-height: 16px;
text-align: center;
visibility: hidden;
border-radius: 5px;
font-size: 12px;
}
.tooltip span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #327FBA;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
.tooltip:hover span {
visibility: visible;
opacity: 0.9;
left: 100%;
top: 50%;
margin-top: -16px;
margin-left: 15px;
z-index: 999;
}
问题是,如果文本长于宽度,则会导致换行,并且工具提示背景中将不包含该文本。
在
.tooltip span {}
中,我已将width:
替换为min-width:
,但它不起作用。也尝试了width: auto
,但工具提示变得更窄。但是,用
height
DID替换min-height
会使工具提示背景垂直包含文本。如何使工具提示最多包含300px的文本? (使用最大宽度),然后换行并保持其垂直。
谢谢。
http://jsfiddle.net/hrfz442d/
最佳答案
只需添加max-width
但添加display:table
.tooltip span {
position: absolute;
color: #FFFFFF;
background: #327FBA;
min-height: 32px;
line-height: 16px;
text-align: center;
visibility: hidden;
border-radius: 5px;
font-size: 12px;
display: table;
max-width:150px;
padding:0 .5em;
}
Jsfiddle Demo