你是正确的,这是行不通
这里的,如果你被允许使用BR标记,有效的解决方案我已经提示合作很多次,这是我的最佳解决方案。
Codepen: https://codepen.io/btn-ninja/pen/JNJrgp
它的工作原理是利用空白NOWRAP使用CSS转换:
<button type="button" class="btn btn-block hasTooltip">
Tooltip on top
<i class="tip">Most tooltips are short<br>but you can add line breaks.</i>
</button>
<button type="button" class="btn btn-block hasTooltip right">
Tooltip on the right.
<i class="tip">Tooltip on right<br>vertically centered.</i>
</button>
.hasTooltip .tip {
position: absolute;
bottom: 100%; left: 50%;
transform: translateX(-50%); }
.hasTooltip.right .tip {
bottom: auto; left: 100%; top:50%;
transform: translateY(-50%); }
翻译允许绝对定位的工具提示水平或垂直居中对内容。带有BR的空白空间实现了长内容的包装,同时允许较短的工具提示与工具提示文本的宽度相匹配。
下面是完整的CSS:
.hasTooltip {
position:relative; }
.hasTooltip .tip {
display:block;
background: #333; color: #fff;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
font-size:inherit;
font-style:normal;
line-height: 1rem;
text-align:center;
padding: 8px 16px;
border-radius:4px;
margin-bottom:5px;
pointer-events: none;
position: absolute;
bottom: 100%; left: 50%; transform: translateX(-50%);
opacity: 0;
transition: opacity .34s ease-in-out;
white-space:nowrap;
z-index:99; }
.hasTooltip .tip:before {
content: "";
display:block; position:absolute; left:0; bottom:-5px;
width:100%; height:5px; }
.hasTooltip .tip:after {
border-left: solid transparent 6px;
border-right: solid transparent 6px;
border-top: solid #333 6px;
bottom: -4px;
content: "";
height: 0;
left: 50%;
margin-left: -6px;
position: absolute;
width: 0; }
.hasTooltip:focus .tip,
.hasTooltip:hover .tip {
opacity: 1;
pointer-events: auto; }
.hasTooltip.right .tip {
bottom: auto; left: 100%; top:50%; transform: translateY(-50%);
margin-bottom:0;
margin-left:5px; }
.hasTooltip.right .tip:before {
left:-5px; bottom:auto; }
.hasTooltip.right .tip:after {
border-left: 0;
border-top: solid transparent 6px;
border-bottom: solid transparent 6px;
border-right: solid #333 6px;
bottom:auto;
left: -4px;
top:50%;
margin-left: 0;
margin-top: -6px; }
你能告诉我们任何代码指定的值?也许你试图解决这个问题的代码?会有帮助 –
@OvidiuUnguru因为它的CSS我不明白的互动,我不知道我可以告诉你显示我试图“修复”它......如我所描述的,我尝试了一些不同的属性,但没有一个获得理想的效果。我发布了基本代码,但没有给出相同的代码3次,它们之间有一个属性差异,不知道要提供什么。 – RhoVisions
https://codepen.io/anon/pen/yodpao看到这个,如果这确实能解决你的问题 –