[英]Bootstrap Tooltips, how to use a fixed with with alignment?
I am trying to achieve what on subject, so a tooltip with fixed width, and with right alignment basing on my relative parent. 我正在尝试实现有关主题的内容,因此将工具提示设置为固定宽度,并根据我的相对父母正确对齐。 I don't understand the logic, if I set min-width to 100%, the width looks like the 50% of the parent div and if I change it I obtain two undesired behaviours:
我不了解逻辑,如果将min-width设置为100%,则宽度看起来像父div的50%,如果更改它,则会得到两种不希望有的行为:
1) The tooltip is going outside the parent div (in my case right side) 1)工具提示超出了父div的范围(在我的情况下为右侧)
2) If I change the absolute position of the tooltip class (not the inner one) I can obtain what I want, but the tooltip-arrow element is not correctly aligned anymore (tried to change the position of the class tooltip-arrow but without success, even if with !important on the right value !) 2)如果我更改了工具提示类的绝对位置(而不是内部的),则可以获取所需的信息,但是tooltip-arrow元素不再正确对齐(试图更改类tooltip-arrow的位置,但是没有成功,即使在正确的值上具有!important!)
Do you have any hints or a best practice to suggest? 您有什么建议或最佳做法吗? Here my jsfiddle
这是我的jsfiddle
<div class="container">
<div class="row">
<div class="col-xs-4">col 1</div>
<div class="col-xs-3 col-custom">
<div class="pull-right">col 2</div>
<!-- data-container="body" data-placement="top" -->
<i class="fa fa-info-circle fa-lg m-t-xl" aria-hidden="true" data-toggle="tooltip" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></i>
</div>
<div class="col-xs-5">col 3</div>
</div>
</div>
Css: CSS:
.col-custom {
border: 1px solid black;
position: relative;
}
.tooltip-inner {
min-width: 100%;
max-width: 70%;
}
.fa-info-circle {
position: absolute;
right: 5px;
top: 0px;
}
Just add this in CSS. 只需在CSS中添加即可。 You are not setting the tooltips width and positioning.
您没有设置工具提示的宽度和位置。
.tooltip{
width:100%;
left:0 !important;
right:0 !important;
}
And if you want the right alignment, add this. 并且如果您想要正确的对齐方式,请添加它。
.tooltip{
width:100%;
right:100% !important;
}
JS for right alignment JS右对齐
$('i[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'right'
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.