Basics

The best way to initialize a jBox is to create a new instance of jBox.

new jBox('Tooltip', {
  attach: '.tooltip'
});

Setting a plugin (in this case Tooltip) is optional, you could also set your options right away: new jBox(options);. Refer to the section options to see what options you can set.

jBox comes with the default plugins Tooltip, Mouse and Modal.

In addition you can include the plugins Confirm, Notice and Image.

Save your jBox instances in variables, so you can access the jBox methods:

var myModal = new jBox('Modal', {
  content: 'This is my jBox'
});
 
myModal.open();

Remember to put your JavaScript code into $(document).ready(function() {});.

Attach jBox to elements

Use the option attach to attach jBoxes to your elements. In the following example, the jBox will open or close when you click on the element with id="myModal":

new jBox('Modal', {
  attach: '#myModal',
  title: 'Hurray!',
  content: 'This is my modal window'
});

 
<div id="myModal">Click me to open a modal window!</div>

Tooltips will open when your mouse hovers over the element, while modal windows will open when you click on them. This behavior is defined in the option trigger. You can set it to click or mouseenter.
In this example the tooltip opens when you click on the element, rather than when your mouse enters:

new jBox('Tooltip', {
  attach: '.tooltip',
  trigger: 'click'
});

 
<span class="tooltip" title="Tooltip 1">Click me!</span>
<span class="tooltip" title="Tooltip 2">Click me!</span>

If you need to access the currently attached element, you can use this.source:

new jBox('Tooltip', {
  attach: '.tooltip',
  trigger: 'click',
  onOpen: function () {
    this.source.data('clicked', (this.source.data('clicked') || 0) + 1);
    this.source.find('span').html(this.source.data('clicked'));
  }
});

 
<span class="tooltip" title="Tooltip 1">Click me! (<span>0</span>)</span>
<span class="tooltip" title="Tooltip 2">Click me! (<span>0</span>)</span>

Open and close

If you want more control over your jBoxes, use the methods open(), close() or toggle():

var myModal = new jBox('Modal');

 
<span onclick="myModal.open();">Open jBox!</span>
<span onclick="myModal.close();">Close jBox!</span>
<span onclick="myModal.toggle();">Toggle jBox!</span>

You can delay opening or closing with the options delayOpen and delayClose:

new jBox('Tooltip', {
  attach: '.tooltip',
  delayOpen: 500,
  delayClose: 1000
});

To force immediate opening or closing, pass the option ignoreDelay to the open or close methods:
myTooltip.close({ignoreDelay: true});.

Content

The easiest way to give your jBoxes content are the options title and content. To make content dependent of the attached element, use the option getTitle and getContent:

new jBox('Tooltip', {
  attach: '.tooltip',
  getTitle: 'data-jbox-title',
  getContent: 'data-jbox-content'
});

 
<span class="tooltip" data-jbox-title="Title 1" data-jbox-content="Content 1">Hover me!</span>
<span class="tooltip" data-jbox-title="Title 2" data-jbox-content="Content 2">Hover me!</span>

If you have a lot of content, you might want to create an element and let your jBox grab it:

new jBox('Modal', {
  attach: '#myModal',
  title: 'Grab an element',
  content: $('#grabMe')
});

 
<div style="display: none" id="grabMe">I'm your content. Remember to set CSS display to none!</div>

To set content on the run, use the methods setTitle and setContent:

var myModal = $('#myModal').jBox('Modal');
 
myModal.setTitle('Hello!').setContent('Some content...');

If the dimensions of jBox change when setting a title or content, jBox will reposition. To avoid that, pass true as second argument: .setContent(content, true).

jBox also can easily load content with AJAX:

new jBox('Modal', {
  attach: '#myModal',
  ajax: {
    url: 'https://reqres.in/api/users?delay=2',
    data: {
      id: 1
    },
    reload: 'strict',
    setContent: false,
    success: function (response) {
      console.log('jBox AJAX response', response);
      this.setContent('<b>Content loaded.</b><br>Check console for response.');
    },
    error: function () {
      this.setContent('<b style="color: #d33">Error loading content.</b>');
    }
  }
});

If you set the option reload to true, your jBox will load new content for each element it is attached to. Set it to 'strict' and jBox will load new content every time it opens.

Positioning

With the options target, position and outside you can position your jBoxes anywhere at any element:

new jBox('Tooltip', {
  attach: '.tooltip',
  target: '#anotherElement',
  position: {
    x: 'left',
    y: 'top'
  },
  outside: 'x'
});

Your target can be any element selector, including window.

The option position is an object with the horizontal align x and the vertical align y.

With the option outside you can move your jBox outside of the targets position, use x, y or xy.

jBox calculates its position when it is being opened or when you set content. If you need the position to be calculated when the window size changes, use the option reposition.

If you want your jBox to adjust its position when it reaches out of the viewable window area, use the options adjustPosition and adjustTracker:

$('.tooltip').jBox('Tooltip', {
  adjustPosition: true,
  adjustTracker: true
});

The option adjustTracker makes sure the position gets also adjusted when you scroll or resize your browser. Note that the position can only get adjusted when your jBox has an outside position.

Pointer

The option pointer adds a pointer to your jBox. Note that your jBox needs to have an outside position.

You can also define where your pointer should be aligned to and what offset it should have:

new jBox('Tooltip', {attach: '.tooltip1', pointer: 'left'});
new jBox('Tooltip', {attach: '.tooltip2', pointer: 'center:-100'});
new jBox('Tooltip', {attach: '.tooltip3', pointer: 'right:60'});

Animations

You can set the duration of the fade animation with the option fade.
jBox also comes with a few CSS animations: zoomIn, zoomOut, pulse, move, slide, flip, tada.

new jBox('Modal', {attach: '#myModal', animation: 'zoomIn'});

To use different animations for opening and closing, use an object: {open: 'tada', close: 'flip'}.
You can also set the direction of the move and slide animations: {open: 'move:right', close: 'slide:top'}.

Events

You can use following events: onInit, onAttach, onPosition, onCreated, onOpen, onClose, onCloseComplete. Note that you can use this within the event functions, it refers to your jBox instance:

new jBox('Tooltip', {
  attach: '#myTooltip',
  trigger: 'click',
  onCreated: function () {
    this.setContent('This is my jBox!');
  },
  onOpen: function() {
    new jBox('Notice', {content: 'Here I come!', color: 'green'});
  },
  onClose: function() {
    new jBox('Notice', {content: 'See ya later!', color: 'red'});
  }
});

Learn more about how to customize your jBoxes in the sections options and methods.