tuttogare/public_html/backend/changelogs/templates/toolbarBtn.php

<style>
#changeLogTooltip {
    opacity: 0;
    color: #000;
    background: #fff;
    position: absolute;
    z-index: 100;
    padding: 15px;
    pointer-events: none;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.15); 
    box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.15);
}

#changeLogTooltip a {
    color: #00497A;
}
#changeLogTooltip.top {
    margin-top: 20px;
}
#changeLogTooltip.show {
    opacity: 1;
    margin-top: 10px;
    pointer-events: all;
}
#changeLogTooltip.show.top {
    margin-top: 10px;
}
#changeLogTooltip:after {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #fff;
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    margin-left: -10px;
}
#changeLogTooltip.top:after {
    border-top-color: transparent;
    border-bottom: 10px solid #fff;
    top: -20px;
    bottom: auto;
}
#changeLogTooltip.left:after {
    left: 10px;
    margin: 0;
}
#changeLogTooltip.right:after {
    right: 10px;
    left: auto;
    margin: 0;
}
</style>
<div id="changeLogTooltip">
<!--DATA WILL BE LOADED-->
</div>
<li id="changelogs-btn" class="nav-item px-2">
<a rel="tooltip" class="nav-link first-level" href="#">
    <i class="fa fa-fire-alt"></i>
    <?php if (!empty($count)) {
        ?>
        <span id="changelogs-counter" style="position:relative; top: -10px;" class="badge badge-danger"><?php echo $count?></span>
        <?php
    }?>
    <span class="d-none d-sm-inline"></span>
</a>
</li>
<script type="text/javascript">
var Tooltip = {
    tooltip: undefined,
    target: undefined,
    show: false,
    bindEvents: function() {
        Tooltip.tooltip = document.getElementById('changeLogTooltip');
        var targets = document.querySelectorAll('[rel=tooltip]');
        for (var i = 0; i < targets.length; ++i) {
            targets[i].addEventListener('click', Tooltip.show);
        }
        Tooltip.tooltip.addEventListener('click', Tooltip.hide);
        window.addEventListener('resize', Tooltip.hide);

    },

    loadChangelogs: async function() {
        let formData = new FormData();
        formData.append("command", "SHOW_LAST");
        const response = await fetch("<?php echo $this->endpoint?>", {
            method: "POST",
            body: formData
        })
        return await response.text();
    },

    show: async function(target)
    {
        if (this.show) {
            Tooltip.hide();
            return
        }
        Tooltip.target = this;
        var tip = await Tooltip.loadChangelogs();
        if( !tip || tip == '' ) {
            return false;
        }
        Tooltip.tooltip.innerHTML = tip ;
        if( window.innerWidth < Tooltip.tooltip.offsetWidth * 1.5 ) {
            Tooltip.tooltip.style.maxWidth = (window.innerWidth / 2)+'px';
        }
        else {
            Tooltip.tooltip.style.maxWidth = 320 + 'px';
        }
        
        var pos_left = Tooltip.target.offsetLeft + ( Tooltip.target.offsetWidth / 2 ) - ( Tooltip.tooltip.offsetWidth / 2 ),
            pos_top  = Tooltip.target.offsetTop - Tooltip.tooltip.offsetHeight - 20;
        Tooltip.tooltip.className = '';
        if( pos_left < 0 )
        {
            pos_left = Tooltip.target.offsetLeft + Tooltip.target.offsetWidth / 2 - 20;
            Tooltip.tooltip.className += ' left';
        }
        
        if( pos_left + Tooltip.tooltip.offsetWidth > window.innerWidth ) {
            pos_left = Tooltip.target.offsetLeft - Tooltip.tooltip.offsetWidth + Tooltip.target.offsetWidth / 2 + 20;
            Tooltip.tooltip.className +=' right';
        }
        
        if( pos_top < 0 )
        {
            var pos_top  = Tooltip.target.offsetTop + Tooltip.target.offsetHeight;
            Tooltip.tooltip.className += ' top';
        }
        
        Tooltip.tooltip.style.left = pos_left + 'px';
        Tooltip.tooltip.style.top = pos_top + 'px';

        Tooltip.tooltip.className += ' show';
    },
    hide: function()
    {
        Tooltip.tooltip.className = Tooltip.tooltip.className.replace('show', '');
        this.show = !this.show;
    }
};
Tooltip.bindEvents();
</script>