更改bootstrap的位置2.1.1在手机上的工具提示
问题描述:
我是一个总noob,只花了3小时googling &尝试,但无法弄清楚。我有这个更改bootstrap的位置2.1.1在手机上的工具提示
<span class="payshiptiptop tooltips">
<a href="#" id="payshiptiptop" rel="tooltip" data-placement="right" data-original-title="<div class='paymentmethods'></div>" data-html="true">
GRATIS Versand
</a>
</span>
但是,如果它是在移动,它应该放在上面。 由于2.1.1不支持自动正确,我尝试了几个代码从*例如Is it possible to change the position of Bootstrap popovers based on screen width?和Changing the position of Bootstrap popovers based on the popover's X position in relation to window edge?以及许多其他人。
我想这是要走的路:
<script>
var options = {
placement: function (context, source) {
var position = $(source).position();
if (position.left < 480) {
return "top";
}
return "right";
}
};
$("#payshiptiptop").popover(options);
</script>
我真的很感激,如果你能帮助我&告诉我,我在我的PHP文件发布。谢谢!
答
如果你正在寻找一个基于CSS的解决方案,这里是为酥料饼的标记:
<div class="yourContainingClass">
<div class="popover fade top in" role="tooltip">
<div class="arrow"></div>
<h3 class="popover-title">Title</h3>
<div class="popover-content"></div>
</div>
</div>
提供你给它一个包木窗类,做什么CSS中媒体查询:
@media (max-width: 600px) {
.yourContainingClass .popover {
}
.yourContainingClass .popover-title {
}
.yourContainingClass .popover-content {
}
}
谢谢,但我需要改变的是数据放置,它定义了使用js的工具提示的绝对位置。使用css不可能得到结果,bc我无法计算绝对位置值。 – user1921209 2014-11-15 08:49:36