Question

我是一个总菜鸟，只花了3个小时谷歌搜索＆amp;尝试但无法弄明白。我有这个

<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不支持自动权限，我尝试了stackoverflow中的几个代码，例如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文件中发布的内容。谢谢！

Answer 1

如果您正在寻找基于CSS的解决方案，这里是popover的标记：

<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 {

  }
}

在移动设备上更改bootstrap 2.1.1工具提示的位置

1 个答案: