我想为工具提示创建一个自定义 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;
}<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 …我有三个图像，悬停时它们使用 :hover 在 css 中增加大小。当用户将鼠标悬停在图像上时，我还希望出现带有图像描述的工具提示（我也应该能够定位工具提示）。
HTML
<div class="bottle-container">
<div class="click-to-top"><img src="image-1.png" alt="Image 1" />Tooltip text</div>
<div class="click-to-top" style="z-index:5;"><img src="image-2.png" alt="Image 2" /></div>
<div class="click-to-top last"><img src="image-3.png" alt="Image 3" /></div>
</div>
CSS
container{
max-width:600px;
margin:0 auto;
min-height:450px;
}
div.click-to-top {
display:inline-block;
position:relative;
max-width:160px;
}
div.click-to-top:hover{
z-index:10;
}
div.click-to-top img{
-webkit-transition: all 0.8s;
moz-transition: all 0.8s;
transition: all 0.8s;
width:130px;
}
div.click-to-top img:hover{
width:140px;
z-index:10;
}
我想在图像上显示一个元素标题（工具提示大小）。我找到了当前元素的标题
$('.downloadPdf').mouseover(function(){
var currentelement = $(this).attr('title');
});
downloadPdf 是元素上的常见类。
实际上，我在底部有一个菜单栏，其中有一些图标。这些图标是实用的。在这里，我希望每当用户将鼠标悬停在这些图标上时，他们的标题必须出现在图像上。这个图像什么都不是，只是一个工具提示形状。
但是如何将它附加到图像上？它的位置只能在元素上。那么我如何获得该职位。很困惑，在这个小任务上至少花费了 3 个小时。任何帮助，将不胜感激。当谈到有效地使用 css 时，我真是太糟糕了。