我想为工具提示创建一个自定义的CSS类,用于包装长度超过25-30的字符串。通常这样长的文本不适合放在工具提示文本区域中。
还有没有办法使用Tooltip (ui.bootstrap.tooltip)来实现这一点?例如使用自定义CSS类来获得所需的输出。
这是简单的CSS工具提示 - Plunker DEMO 以下是相应的代码片段:
还有没有办法使用Tooltip (ui.bootstrap.tooltip)来实现这一点?例如使用自定义CSS类来获得所需的输出。
这是简单的CSS工具提示 - Plunker DEMO 以下是相应的代码片段:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
max-width:100px;
padding:15px;
min-height:30px;
background:#fff;
visibility: hidden;
border: 1px solid black;
color: #000;
text-align: center;
border-radius: 6px;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me 1
<span class="tooltiptext">Tooltip text</span>
</div>
<div class="tooltip">Hover over me 2
<span class="tooltiptext">Array [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,,1,11,1,1,1,11,1,,1,1,1,1,1,1,1,1,1,1,1,1,1,1]</span>
</div>
</body>