您好,我正在尝试使用 tooltipster 从 jquery 数据表中获取按钮上的工具提示,但 div 只是内容的大小,我似乎无法将其设置为按钮的大小
我检查了工具上的 css,它不会得到它的父宽度,因为有一个跨度
<button class="btn btn-secondary buttons-pdf buttons-html5 btn-default" tabindex="0" aria-controls="tblConsumos" type="button">
<span>
<div class="tips tooltipstered">
<svg class="svg-inline--fa fa-file-pdf fa-w-12" style="color: red;" aria-hidden="true" focusable="false" data-prefix="far" data-icon="file-pdf" role="img">
</svg><i class="far fa-file-pdf" style="color:red;">
</div>
</span>
</button>
我知道这可能用 javascript 实现,但我一直在寻找一种 css 方法,但我不知道如何绕过该跨度。
最佳答案
试试这个
.buttons-pdf{
position: relative;
display: inline-block;
}
.buttons-pdf .tooltipstered {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
}
.buttons-pdf .tooltipstered::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.buttons-pdf:hover .tooltipstered {
visibility: visible;
}
关于html - Jquery 数据表按钮使按钮的内部 div 大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56164174/