There are two simple ways to set up a jBox. You can use jQuery selectors or create a new instance of jBox. These two examples are exactly the same:

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

Setting a type is optional, you could also set your options right away: new jBox(options);. Types save you the hassle to define specific options each time. Refer to the section options to see what options you can set.

You can use the following types: Tooltip, Mouse, Modal, Confirm, Notice, Image.

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

var myModal = new jBox('Modal', {
    content: 'This is my jBox'

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

Attach jBox to elements

Use jQuery selectors or 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>
Click me to open a modal window!

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:

$('.tooltip').jBox('Tooltip', {
    trigger: 'click'
<span class="tooltip" title="Tooltip 1">Click me!</span>
<span class="tooltip" title="Tooltip 2">Click me!</span>
Click me!Click me!

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=";">Open jBox!</span>
<span onclick="myModal.close();">Close jBox!</span>
<span onclick="myModal.toggle();">Toggle jBox!</span>
Open jBox!Close jBox!Toggle jBox!

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

$('.tooltip').jBox('Tooltip', {
    delayOpen: 500,
    delayClose: 1000
Hover me!

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


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:

$('.tooltip').jBox('Tooltip', {
    getTitle: 'data-jbox-title',
    getContent: 'data-jbox-content'
<span class="tooltip" data-jbox-title="jBox title 1" data-jbox-content="jBox content 1">Hover me!</span>
<span class="tooltip" data-jbox-title="jBox title 2" data-jbox-content="jBox content 2">Hover me!</span>
Hover me!Hover me!

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

$('#myModal').jBox('Modal', {
    title: 'Grab an element',
    content: $('#grabMe')
<div style="display: none" id="grabMe">I'm your content. Remember to set CSS display to none!</div>
Click me!

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:

$('#myModal').jBox('Modal', {
    ajax: {
        url: '/example.php',
        data: 'id=1',
        reload: true
Click me!

If you set the option reload to true, your jBox will load the content every time it opens.


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

$('.tooltip').jBox('Tooltip', {
    target: $('#anotherElement'),
    position: {
        x: 'left',
        y: 'top'
    outside: 'x'
Another Element Click me!

Your target can be any element, 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 opend 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
Click me! I will flipp!Click me! I will move!

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.


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:

$('.tooltip1').jBox('Tooltip', {pointer: 'left'});
$('.tooltip2').jBox('Tooltip', {pointer: 'center:-100'});
$('.tooltip3').jBox('Tooltip', {pointer: 'right:60'});
Hover me! Hover me! Hover me!


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.

$('#myModal').jBox('Modal', {animation: 'zoomIn'});
zoomIn zoomOut pulse move slide flip tada

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'}.

Fading is supported cross-browser, for animations you'll need a modern browser, or IE from version 10.


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

$('#myModal').jBox('Modal', {
    onOpen: function() {
        this.setContent('jBox is opening…');
    onClose: function() {
        this.setContent('jBox is closing…');
Click me!

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