133 lines
4.4 KiB
JavaScript
133 lines
4.4 KiB
JavaScript
/*=========================================================================================
|
||
File Name: popover.js
|
||
Description: Popovers are an updated version, which don’t rely on images, use CSS3 for animations, and data-attributes for local title storage.
|
||
----------------------------------------------------------------------------------------
|
||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||
Author: PIXINVENT
|
||
Author URL: http://www.themeforest.net/user/pixinvent
|
||
==========================================================================================*/
|
||
(function (window, document, $) {
|
||
'use strict';
|
||
|
||
// Basic Initialization
|
||
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
|
||
|
||
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
|
||
return new bootstrap.Popover(popoverTriggerEl);
|
||
});
|
||
|
||
/******************/
|
||
// Popover events //
|
||
/******************/
|
||
|
||
// onShow event
|
||
var showPopoverTrigger = document.getElementById('show-popover');
|
||
|
||
var showPopover = new bootstrap.Popover(showPopoverTrigger, {
|
||
title: 'Popover Show Event',
|
||
content: 'Bonbon chocolate cake. Pudding halvah pie apple pie topping marzipan pastry marzipan cupcake.',
|
||
trigger: 'click',
|
||
placement: 'right'
|
||
});
|
||
|
||
showPopoverTrigger.addEventListener('show.bs.popover', function () {
|
||
alert('Show event fired.');
|
||
});
|
||
|
||
// onShown event
|
||
var shownPopoverTrigger = document.getElementById('shown-popover');
|
||
|
||
var shownPopover = new bootstrap.Popover(shownPopoverTrigger, {
|
||
title: 'Popover Shown Event',
|
||
content: 'Bonbon chocolate cake. Pudding halvah pie apple pie topping marzipan pastry marzipan cupcake.',
|
||
trigger: 'click',
|
||
placement: 'bottom'
|
||
});
|
||
|
||
shownPopoverTrigger.addEventListener('shown.bs.popover', function () {
|
||
alert('Shown event fired.');
|
||
});
|
||
|
||
// onHide event
|
||
var hidePopoverTrigger = document.getElementById('hide-popover');
|
||
|
||
var hidePopover = new bootstrap.Popover(hidePopoverTrigger, {
|
||
title: 'Popover Hide Event',
|
||
content: 'Bonbon chocolate cake. Pudding halvah pie apple pie topping marzipan pastry marzipan cupcake.',
|
||
trigger: 'click',
|
||
placement: 'bottom'
|
||
});
|
||
|
||
hidePopoverTrigger.addEventListener('hide.bs.popover', function () {
|
||
alert('Hide event fired.');
|
||
});
|
||
|
||
// onHidden event
|
||
var hiddenPopoverTrigger = document.getElementById('hidden-popover');
|
||
|
||
var hiddenPopover = new bootstrap.Popover(hiddenPopoverTrigger, {
|
||
title: 'Popover Hidden Event',
|
||
content: 'Bonbon chocolate cake. Pudding halvah pie apple pie topping marzipan pastry marzipan cupcake.',
|
||
trigger: 'click',
|
||
placement: 'left'
|
||
});
|
||
|
||
hiddenPopoverTrigger.addEventListener('hidden.bs.popover', function () {
|
||
alert('Hidden event fired.');
|
||
});
|
||
|
||
// onInserted event
|
||
var insertedPopoverTrigger = document.getElementById('inserted-popover');
|
||
|
||
var insertedPopover = new bootstrap.Popover(insertedPopoverTrigger, {
|
||
title: 'Popover Inserted Event',
|
||
content: 'Bonbon chocolate cake. Pudding halvah pie apple pie topping marzipan pastry marzipan cupcake.',
|
||
trigger: 'click',
|
||
placement: 'left'
|
||
});
|
||
|
||
insertedPopoverTrigger.addEventListener('inserted.bs.popover', function () {
|
||
alert('Inserted event fired.');
|
||
});
|
||
|
||
/*******************/
|
||
// Tooltip methods //
|
||
/*******************/
|
||
|
||
// Show method
|
||
var showMethod = document.getElementById('show-method');
|
||
|
||
var showPopoverMethod = new bootstrap.Popover(showMethod);
|
||
showMethod.addEventListener('click', function () {
|
||
showPopoverMethod.show();
|
||
});
|
||
|
||
// Hide method
|
||
var hideMethod = document.getElementById('hide-method');
|
||
|
||
var hidePopoverMethod = new bootstrap.Popover(hideMethod);
|
||
hideMethod.addEventListener('mouseenter', function () {
|
||
hidePopoverMethod.show();
|
||
});
|
||
|
||
hideMethod.addEventListener('click', function () {
|
||
hidePopoverMethod.hide();
|
||
});
|
||
|
||
// Toggle method
|
||
var toggleMethod = document.getElementById('toggle-method');
|
||
|
||
var togglePopoverMethod = new bootstrap.Popover(toggleMethod);
|
||
toggleMethod.addEventListener('click', function () {
|
||
togglePopoverMethod.toggle();
|
||
});
|
||
|
||
/* Manual Trigger*/
|
||
var popoverTriggerListMn = document.getElementById('manual-popover');
|
||
|
||
var manualPopover = new bootstrap.Popover(popoverTriggerListMn);
|
||
popoverTriggerListMn.addEventListener('click', function () {
|
||
manualPopover.toggle();
|
||
});
|
||
})(window, document, jQuery);
|