如何创建工具提示？

Question

如何创建工具提示？

Poo*_*dar 7 html css tooltip angular-bootstrap

我想为工具提示创建一个自定义 CSS 类，它将包含长度超过 25-30 的字符串。通常这么长的文本不适合工具提示文本区域。

无论如何，是否可以使用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;
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)