%PDF-
%PDF-
Mini Shell
Mini Shell
/*=========================================================================================
File Name: tooltip.js
Description: Tooltips are an updated version, which don’t rely on images,
use CSS3 for animations, and data-attributes for local title storage.
----------------------------------------------------------------------------------------
Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
Version: 1.0
Author: Pixinvent
Author URL: hhttp://www.themeforest.net/user/pixinvent
==========================================================================================*/
(function(window, document, $) {
'use strict';
/******************/
// Tooltip events //
/******************/
// onShow event
$('#show-tooltip').tooltip({
title: 'Tooltip Show Event',
trigger: 'click',
placement: 'right'
}).on('show.bs.tooltip', function() {
alert('Show event fired.');
});
// onShown event
$('#shown-tooltip').tooltip({
title: 'Tooltip Shown Event',
trigger: 'click',
placement: 'top'
}).on('shown.bs.tooltip', function() {
alert('Shown event fired.');
});
// onHide event
$('#hide-tooltip').tooltip({
title: 'Tooltip Hide Event',
trigger: 'click',
placement: 'bottom'
}).on('hide.bs.tooltip', function() {
alert('Hide event fired.');
});
// onHidden event
$('#hidden-tooltip').tooltip({
title: 'Tooltip Hidden Event',
trigger: 'click',
placement: 'left'
}).on('hidden.bs.tooltip', function() {
alert('Hidden event fired.');
});
/*******************/
// Tooltip methods //
/*******************/
// Show method
$('#show-method').on('click', function() {
$(this).tooltip('show');
});
// Hide method
$('#hide-method').on('mouseenter', function() {
$(this).tooltip('show');
});
$('#hide-method').on('click', function() {
$(this).tooltip('hide');
});
// Toggle method
$('#toggle-method').on('click', function() {
$(this).tooltip('toggle');
});
// Dispose method
$('#dispose').on('click', function() {
$('#dispose-method').tooltip('dispose');
});
/* Trigger*/
$('.manual').on('click', function() {
$(this).tooltip('show');
});
$('.manual').on('mouseout', function() {
$(this).tooltip('hide');
});
/* Default template */
$(".template").on('click', function(){
console.log(
'<div class="tooltip" role="tooltip">' +
'<div class="tooltip-arrow"></div>' +
'<div class="tooltip-inner"></div>' +
'</div>'
);
});
// Custom Tooltip
$("[data-popup=tooltip-custom]").on('shown.bs.tooltip', function(){
var bg = "",
text = "",
bgClass = "",
textClass = "",
$this = $(this);
if($this.data("bg-color") !== undefined){
bg = $this.data("bg-color");
bgClass = "tooltip-bg-" +bg;
$('.tooltip').addClass(bgClass);
}
if($this.data("text-color") !== undefined){
text = $this.data("text-color");
textClass = "tooltip-text-" +text;
$('.tooltip').addClass(textClass);
}
});
$("[data-popup=tooltip-custom]").on('hidden.bs.tooltip', function(){
var bg = "",
text = "",
bgClass = "",
textClass = "",
$this = $(this);
if($this.data("bg-color") !== undefined){
bg = $this.data("bg-color");
bgClass = "tooltip-bg-" +bg;
$('.tooltip').removeClass(bgClass);
}
if($this.data("text-color") !== undefined){
text = $this.data("text-color");
textClass = "tooltip-text-" +text;
$('.tooltip').removeClass(textClass);
}
});
})(window, document, jQuery);
Zerion Mini Shell 1.0