Want to get this as ready made template with just 1 CLICK INSTALL?
Code Snippet for Animated Tooltip:
<style>
.mdw-main-tooltip{
--span-color: #FFFFFF;
--tooltip-x-offset: 20;
--tooltip-y-offset: 20;
}
.mdw-stripe-background{
--background-color-1: #120636;
--background-color-2: #222443;
background: linear-gradient(var(--background-color-1,#120636) 50%, var(--background-color-2,#222443) 50%);
background-size: 100% 3px;
}
.mdw-main-tooltip{
max-width: 100%;
}
[class^='mdw-tooltip'],
[class*='mdw-tooltip']{
pointer-events: none;
opacity: 0;
z-index: 0;
}
.tooltip-show{
opacity: 1;
z-index: 100;
}
.mdw-trigger-tooltip{
cursor: pointer;
color: var(--span-color,#FFFFFF);
}
.mdw-main-tooltip p:last-child{
margin-bottom: 0 !important;
}
.tooltip-bg{
display: flex;
flex-wrap: wrap;
position: absolute;
top: 0;
left: 0;
}
[class^='mdw-tooltip-v5'] .tooltip-bg,
[class*='mdw-tooltip-v5'] .tooltip-bg{
filter: url(#gooey);
}
.tooltip-bg > div{
opacity: 0;
background: var(--tooltip-bg-color, #572BC2);
outline: 1px solid var(--tooltip-bg-color, #572BC2);
will-change: opacity, transform;
}
[class^='mdw-tooltip'].tooltip-show .tooltip-bg > div,
[class*='mdw-tooltip'].tooltip-show .tooltip-bg > div{
opacity: 1;
transition: 0.3s ease-in-out var(--d);
}
[class^='mdw-tooltip-v3'] .tooltip-bg > div,
[class*='mdw-tooltip-v3'] .tooltip-bg > div{
transform: scale(0) translateY(20px);
}
[class^='mdw-tooltip-v3'].tooltip-show .tooltip-bg > div,
[class*='mdw-tooltip-v3'].tooltip-show .tooltip-bg > div{
transform: scale(1) translateY(0);
}
[class^='mdw-tooltip-v4'] .tooltip-bg > div,
[class*='mdw-tooltip-v4'] .tooltip-bg > div{
transform: scale(0, 1);
}
[class^='mdw-tooltip-v4'].tooltip-show .tooltip-bg > div,
[class*='mdw-tooltip-v4'].tooltip-show .tooltip-bg > div{
transform: scale(1);
}
[class^='mdw-tooltip-v5'] .tooltip-bg > div,
[class*='mdw-tooltip-v5'] .tooltip-bg > div{
transform: scale(0.3);
}
[class^='mdw-tooltip-v5'].tooltip-show .tooltip-bg > div,
[class*='mdw-tooltip-v5'].tooltip-show .tooltip-bg > div{
transform: scale(1);
}
[class^='mdw-tooltip'] > .elementor-element,
[class*='mdw-tooltip'] > .elementor-element{
opacity: 0;
}
[class^='mdw-tooltip'].tooltip-show > .elementor-element,
[class*='mdw-tooltip'].tooltip-show > .elementor-element{
opacity: 1;
transition: 0.4s ease-in-out var(--content-delay, 0.6s);
}
[class^='mdw-tooltip'] svg,
[class*='mdw-tooltip'] svg{
position: absolute;
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
if(!MDW146){
var MDW146 = true;
var selector = '.mdw-main-tooltip'
$(document).ready(function(){
$(selector).each(function(){
var $this = $(this),
vw = $(window).width(),
vh = $(window).height(),
tooltips = $this.find('[class^="mdw-tooltip"], [class*="mdw-tooltip"]'),
triggers = $this.find('.mdw-trigger-tooltip'),
options = []
function getCSS(el, prop, defaultVal){
var value = getComputedStyle(el[0]).getPropertyValue(prop)
return value ? parseFloat(value) : defaultVal
}
function getValues(){
tooltips.each(function(i){
var className = $(this).attr('class'),
classNameIndex = className.indexOf('mdw-tooltip'),
shortClass = className.substring(classNameIndex, className.indexOf(' ',classNameIndex)),
values = shortClass.split('-')
options[i] = {
column: 10,
duration: 1000,
version: 0
}
values.forEach(function(value, index){
if(value =='column' && values[index+1] && !isNaN(values[index+1])){ options[i].column = parseFloat(values[index+1])
}
if(value =='duration' && values[index+1] && !isNaN(values[index+1])){ options[i].duration = parseFloat(values[index+1])
}
if(value.startsWith('v') && value[1] && !isNaN(value[1])){
options[i].version = parseFloat(value[1] - 1)
}
})
})
}
function createTooltipBg(el){
var bgColor = el.css('background-color'),
newDiv = $('<div></div>')
newDiv.addClass('tooltip-bg')
newDiv.get(0).style.setProperty('--tooltip-bg-color', bgColor)
el.prepend(newDiv)
el.css('background-color', 'transparent')
}
function updatePosition(e, el){
var tooltipWidth = el.outerWidth(),
tooltipHeight = el.outerHeight(),
leftOffset = getCSS($this,'--tooltip-x-offset',20),
topOffset = getCSS($this,'--tooltip-y-offset',20),
left = Math.max(20, Math.min(vw - tooltipWidth - 20, e.clientX + leftOffset)),
top = Math.max(20, Math.min(vh - tooltipHeight - 20, e.clientY + topOffset))
el.css({
left: left + 'px',
top: top + 'px'
})
}
function createTooltip(){
tooltips.each(function(tooltipIndex){
var el = $(this)
createTooltipBg(el)
var cols = options[tooltipIndex].column,
duration = options[tooltipIndex].duration,
isOpen = false,
bg = el.find('.tooltip-bg')
el.get(0).style.setProperty('--content-delay', duration * 0.5 + 'ms'),
tooltipWidth = el.outerWidth(),
tooltipHeight = el.outerHeight(),
blockWidth = tooltipWidth/cols,
rows = Math.ceil(tooltipHeight / blockWidth),
totalBlocks = rows*cols,
blockHeight = tooltipHeight/rows
function layout(){
var html = '', i
if(el.is('[class^="mdw-tooltip-v4"], [class*="mdw-tooltip-v4"]')){
for(i = 0; i < cols; i++){
html += '<div style="width:' + blockWidth + 'px; height:' + tooltipHeight + 'px;"></div>'
}
}else{
for(i = 0; i < totalBlocks; i++){
html += '<div style="width:' + blockWidth + 'px; height:' + blockHeight + 'px;"></div>'
}
}
bg.html(html)
if(el.is('[class^="mdw-tooltip-v5"], [class*="mdw-tooltip-v5"]')){
var gooeySvg = `<svg><defs><filter id="gooey"><feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/><feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo"/></filter></defs></svg>`
el.append(gooeySvg)
}
}
function shuffle(array) {
var currentIndex = array.length
while (currentIndex != 0) {
var randomIndex = Math.floor(Math.random() * currentIndex)
currentIndex--
[array[currentIndex], array[randomIndex]] = [
array[randomIndex], array[currentIndex]]
}
}
function setDelay(v){
var version = v,
divDuration = 300,
maxDelay = duration - divDuration,
divs = el.find('.tooltip-bg > div'),
rect = el[0].getBoundingClientRect(),
rx = rect.left,
ry = rect.top,
maxD = Math.sqrt(Math.pow((rect.width - blockWidth), 2) + Math.pow((rect.height - blockHeight), 2)),
totalDiv = divs.length,
t = cols,
delayArray = []
if(version==1){
var colIncrement = 1,
rowIncrement = 3,
maxV = (cols-1)*colIncrement+(rows-1)*rowIncrement
}
if(version==2){
rx = rect.left + rect.width / 2,
ry = rect.top + rect.height / 2,
maxD = Math.sqrt(Math.pow((rect.width - blockWidth)/2, 2) + Math.pow((rect.height - blockHeight)/2, 2))
}
if(version==4) t = totalBlocks
var delayStep = maxDelay/(t-1)
for(var i = 0; i < t; i++){
delayArray.push(i*delayStep)
}
shuffle(delayArray)
divs.each(function(i){
var div = this,
d = div.getBoundingClientRect(),
dx = d.left - rx,
dy = d.top - ry,
dist = Math.sqrt(dx*dx + dy*dy),
delay = (dist / maxD) * maxDelay
if(version == 1){
var colIndex = i%cols,
rowIndex = Math.floor(i/cols),
val = colIndex*colIncrement+rowIndex*rowIncrement
delay = (val / maxV) * maxDelay
}
if(version == 2){
dx = d.left + d.width / 2 - rx
dy = d.top + d.height / 2 - ry
dist = Math.sqrt(dx*dx + dy*dy)
delay = (dist / maxD) * maxDelay
}
if(version==3 || version==4){
delay = delayArray[i]
}
div.style.setProperty('--d', `${delay}ms`)
})
}
layout()
setDelay(options[tooltipIndex].version)
})
}
getValues()
createTooltip()
triggers.each(function(i){
var trigger = $(this)
trigger.on('mouseenter click', function(e){
tooltips.eq(i).addClass('tooltip-show')
updatePosition(e, tooltips.eq(i))
})
trigger.on('mousemove', function(e){
updatePosition(e, tooltips.eq(i))
})
trigger.on('mouseleave', function(){
tooltips.removeClass('tooltip-show')
})
})
$(window).on('load resize', function(){
vw = $(window).width()
vh = $(window).height()
})
$(window).on('scroll', function(){
tooltips.removeClass('tooltip-show')
})
})
})
}
</script>
