Understanding jBox configuration options

Question

I was just playing around with this plugin called jBox.js and came across a few new options. It's a pretty customizeable plugin. The option I am talking about is adjustDistance.

The documentation says, you can pass in an integer or object, like so:

$(function(){
          $('.tooltip').jBox('Tooltip', {
              trigger: 'click',
              adjustDistance : {
                top : 15,
                bottom : 15,
                left : 15,
                right : 50
              }
          });
      });

I did that , but I don't see any difference in the way my tooltip is rendered, made a FIDDLE HERE.

The documentation describes this option as follows:

Distance to the window edge when adjusting should start. Use an object to set different values, e.g. {top: 50, right: 20, bottom: 5, left: 20}

But I don't quite understand its usage. Can anybody explain?

what's it for? To make sure popup isn't overflowing the view such as setting it to show right but target is on right side of page — charlietfl, Aug 12 '15 at 18:32

score 2 · Accepted Answer · answered Aug 12 '15 at 18:37

If we give adjustDistance say 10, the tooltip will try to adjust(reposition) itself when any of window's edge is within 10px distance of the tooltip. You can give custom values for different edges of window as well.

This examples will make it clear:

Example 1:

$(function(){
      $('.tooltip').jBox('Tooltip', {
          trigger: 'click',
          adjustDistance : {
            top : 15,
            bottom : 15,
            left : 15,
            right : 50
          }
      });
  });

Example 2 (changing value for adjustDistance bottom):

$(function(){
      $('.tooltip').jBox('Tooltip', {
          trigger: 'click',
          adjustDistance : {
            top : 15,
            bottom : 150,
            left : 15,
            right : 50
          }
      });
  });

For both of them, try clicking on button to open tooltip and then resize the window shrinking from bottom such that tooltip needs to readjust.

Understanding jBox configuration options

1 Answers1