gpt4 book ai didi

html - 如何创建工具提示?

转载 作者:行者123 更新时间:2023-11-27 23:30:05 25 4
gpt4 key购买 nike

<分区>

我想为 tooltip 创建一个自定义 CSS 类,它将包装长度超过 25-30 的字符串。通常这样长的文本不适合 tootltip 文本区域。

并且无论如何都可以使用 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>

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com