basic: {   
    STYLE: {
        CLASS: {
            box: 'simple-box',
            cover: 'curtain',
            cross: 'cross'
        }
    },
    ANIMATION: {   
        IN: {
            box: 'zap-in cubic-bezier(.73,.75,.72,1.77)',
            cover: 'fade-in',
            duration: 300
        },
        OUT: {
            box: 'zap-out cubic-bezier(.73,.75,.72,1.77)',
            cover: 'fade-out',
            duration: 200   
        }
    },
    POSITION: {
        x: 'auto',
        y: 'auto'   
    },
    
    cover: 'yes',
    cross: 'yes',
    cross_content: 'x',
    esc: 'ye',   
    full_draggable: 'yes'
},

success: {
    STYLE: {
        CLASS: {
            box: 'success'
        }
    },
    ANIMATION: {
        IN: {
            box: 'drop'
        },
        OUT: {
            box: 'undrop'
        }
    },
    POSITION: {
        y: 'top'
    },
    
    cross: 'no',
    full_draggable: 'naaaaoh',
    click_me_out: 'yes, tis is convenient'
},

error: {
    STYLE: {
        CLASS: {
            box: 'error'
        }
    },
    ANIMATION: {
        IN: {
            box: 'short-arrive-left, fade-in'
        },
        OUT: {
            box: 'fade-out'
        }
    },
    POSITION: {
        x: '!10',
        y: '10'
    }
},

dropdown: {
    STYLE: {
        CLASS: {
            box: 'dropdown'
        }
    },
    ANIMATION: {
        IN: {
            duration: 90
        },
        OUT: {
            box: ''
        }
    },
    POSITION: {
        z: '-1'
    },
    
    cross: 'no',
    cover: 'no',
    full_draggable: 'no'
},

context_menu: {
    STYLE: {
        CLASS: {
            box: 'context-menu'
        }
    },
    ANIMATION: {
        IN: {
            box: ''
        },
        OUT: {
            box: 'fade-out',
            duration: 120
        }
    },
    POSITION: {
        fixed: 'no',
        z: '-1'
    },
    
    cover: 'no',
    cross: 'no',
    full_draggable: 'no'
},

tooltip: {   
    STYLE: {
        CLASS: {
            box: 'popscript-tooltip'
        }
    },
    ANIMATION: {
        OUT: {
            box: 'fade-out'
        }
    },
    POSITION: {
        z: '-1'
    },
    
    click_me_out: 'yeh',   
    cross: 'no',
    cover: 'no',
    blur: 'no',
    esc: 'yes',
    full_draggable: 'no'
},

tip_left: {
    STYLE: {
        CLASS: {
            box: 'popscript-tooltip left'
        }
    },
    ANIMATION: {
        IN: {
            box: 'short-arrive-left, fade-in'
        }
    }
},
tip_right: {
    STYLE: {
        CLASS: {
            box: 'popscript-tooltip right'
        }
    },
    ANIMATION: {
        IN: {
            box: 'short-arrive-right, fade-in'
        }
    }
},
tip_up: {
    STYLE: {
        CLASS: {
            box: 'popscript-tooltip up'
        }
    },
    ANIMATION: {
        IN: {
            box: 'short-arrive-up, fade-in'
        }
    }
},
tip_down: {
    STYLE: {
        CLASS: {
            box: 'popscript-tooltip down'
        }
    },
    ANIMATION: {
        IN: {
            box: 'short-arrive-down, fade-in'
        }
    }
},

roller: {
    STYLE: {
        CLASS: {
            box: 'roller'
        }
    },
    ANIMATION: {
        IN: {
            box: 'newspaper',
            duration: 800
        }
    },
    POSITION: {
        x: 'auto',
        y: '8%',
        roller: 'yes'
    }
}

/* General*/
document.getElementById('demo-general').onclick = function () {
    pop('This is a general box');
};

/* Success*/
document.getElementById('demo-success').onclick = function () {
    pop('Your comment was successfully posted! (click to close)',
        'success');
};

/* Error*/
document.getElementById('demo-error').onclick = function () {
    pop('Error 418: You are a teapot',
        'error');
};

/* Dropdown*/
var dropdown_button = document.getElementById('demo-dropdown');
pop([dropdown_button, 'click', 'click'],
    '<ul>' +
        '<li>About</li>' +
        '<li>Help</li>' +
        '<li>Log Out</li>' +
    '</ul>',
    'dropdown',
    { nearElement: [dropdown_button, function (x, y, w, h) {
        return [x, y + h + 4]
    }]}
);


/* Context Menu*/
document.getElementById('demo-context-menu').oncontextmenu = function (event) {
    event = event || window.event;
    pop('<ul>' +
            '<li>Cut</li>' +
            '<li>Copy</li>' +
            '<li>Paste</li>' +
            '<li>Share</li>' +
    '</ul>',
        'context_menu',
        {POSITION: {
            y: event.clientY + '+scrolled',
            x: event.clientX + '+scrolled' }
        }
    );
    return false;
};

/* Tooltips*/

/* Tooltip Left*/
var tooltip_left_button = document.getElementById('demo-tooltip-left');
pop([tooltip_left_button, ['mouseover', 'click'], ['mouseout', 'click']],
    'pop from the left',
    'tooltip tip_right',
    {nearElement: [tooltip_left_button, function (x, y, w, h) {
        return [x - w - 6, y]
    }]}
);

/* Tooltip Right*/
var tooltip_right_button = document.getElementById('demo-tooltip-right');
pop([tooltip_right_button, ['mouseover', 'click'], ['mouseout', 'click']],
    'pop from the right',
    'tooltip tip_left',
    {nearElement: [tooltip_right_button, function (x, y, w, h) {
        return [x + w + 6, y]
    }]}
);

/* Tooltip Up*/
var tooltip_up_button = document.getElementById('demo-tooltip-up');
pop([tooltip_up_button, ['mouseover', 'click'], ['mouseout', 'click']],
    'pop from the up',
    'tooltip tip_up',
    {nearElement: [tooltip_up_button, function (x, y, w, h) {
        return [x, y - h]
    }]}
);

/* Tooltip Down*/
var tooltip_down_down = document.getElementById('demo-tooltip-down');
pop([tooltip_down_down, ['mouseover', 'click'], ['mouseout', 'click']],
    'pop from down below',
    'tooltip tip_down',
    {nearElement: [tooltip_down_down, function (x, y, w, h) {
        return [x, y + h + 6]
    }]}
);

/* Roller*/
pop([document.getElementById('demo-roller'), 'click'],
    '<iframe src="https://rajnathani.com"></iframe>',
    'roller');

Crafted with  by Raj Nathani