如何创建工具提示？

一尘不染

如何创建工具提示？

css

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

而且是否有使用[工具提示ui.bootstrap.tooltip）进行此操作？就像使用自定义CSS类来获取所需的输出。

这是简单的CSS工具提示

这是相同的代码片段：

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

阅读 254

2020-05-16

共1个答案

一尘不染

CSS解决方案

对于眼前的问题有一个非常简单的解决方案。我基本上添加的是以下CSS代码

word-wrap:break-word;

围绕您的工具提示文本的类。

此外，这是一个很好的阅读

如果我使用的是Angular UI，该怎么办？

为了从angular ui样式化工具提示，我添加tooltip-class="tooltip"了工具提示代码。

2020-05-16