0

I am a total noob and just spend 3 hours googling & trying but couldnt figure it out. I have this

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

but if it is on mobile, it should be placed on top. As 2.1.1 does not support auto right, I tried several codes from stackoverflow e.g. Is it possible to change the position of Bootstrap popovers based on screen width? and Changing the position of Bootstrap popovers based on the popover's X position in relation to window edge? as well as a lot of others.

I guess this is the way to go:

<script>
var options = {
    placement: function (context, source) {
        var position = $(source).position();

        if (position.left < 480) {
            return "top";
        }

        return "right";
    }
};
$("#payshiptiptop").popover(options);
</script>

I would really appreciate if you could help me & tell me what I have to post in my php file. Thanks!

Community
  • 1
  • 1
user1921209
  • 1
  • 2

1 Answers1

0

If you're looking for a CSS based solution, here is the markup for the 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>

Providing you gave it a wraping class, do whatever CSS in a media query:

@media (max-width: 600px) {
  .yourContainingClass .popover {

  }
  .yourContainingClass .popover-title {

  }
  .yourContainingClass .popover-content {

  }
}
elzi
  • 5,442
  • 7
  • 37
  • 61
  • Thanks, but what I need to change is the data-placement which defines the absolute position of the tooltip using js. It is impossible to get the results using css, bc I cannot calculate the absolute position values in it. – user1921209 Nov 15 '14 at 08:49