.

VaKeR CYBER ARMY

Server : Apache/2.4.41 (Ubuntu)
System : Linux absol.cf 5.4.0-198-generic #218-Ubuntu SMP Fri Sep 27 20:18:53 UTC 2024 x86_64
User : www-data ( 33)
PHP Version : 7.4.33
Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare,
Directory : /var/www/html/libs/absol-acomp/demo/

Upload File :

Current File : /var/www/html/libs/absol-acomp/demo/tooltip.html

<!DOCTYPE html>
<html>

<head>
    <title>Tooltip</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://absol.cf/hightlight/styles/default.css">
    <script src="../dist/absol-acomp.js?<?php  echo stat('../dist/absol-acomp.js')['mtime'];?>"></script>

    <script src="https://absol.cf/hightlight/highlight.pack.js"></script>
    <style>
        .test-ctn {
            margin: 3em;
        }

        .test-ctn > button {
            margin: 3em;
        }
    </style>
</head>

<body>
<div class="absol-tooltip top">
    <div class="absol-tooltip-content">This is the text</div>
    <div class="absol-tooltip-arrow"></div>
</div>

<div class="absol-tooltip bottom">
    <div class="absol-tooltip-content">This is the <strong>text</strong> with <span style="color:yellow">html
                element</span></div>
    <div class="absol-tooltip-arrow"></div>
</div>

<div class="absol-tooltip-arrow"></div>
</div>

<div class="absol-tooltip right">
    <div class="absol-tooltip-content">
        <h3>Tiêu đề</h3>
        <br>
        <span>Nội dung</span>
    </div>
    <div class="absol-tooltip-arrow"></div>
</div>
<div class="test-ctn">
    <button id="btn1">Top Tooltop</button>
    <button id="btn2">Bot Tooltop</button>
    <button id="btn3">Left Tooltop</button>
    <button id="btn4">Right Tooltop</button>
    <a id="btn5">Auto</a>
</div>
<script class="viewable">

    absol.Tooltip.showWhenClick(absol.$('#btn1'), 'this is top', 'top')
    absol.Tooltip.showWhenClick(absol.$('#btn2'), 'this is bot || this is bot', 'bottom');

    absol.Tooltip.showWhenClick(absol.$('#btn3'),
        absol._({
            tag: 'img', style: { height: "10em" },
            attr: {
                crossorigin: '', src: "http://absol.cf/share/8TEb9p4ec.jpg"
            }
        }), 'left');

    absol.Tooltip.showWhenClick(absol.$('#btn4'),
        absol._({
            tag: 'img', style: { height: "10em" },
            attr: {
                crossorigin: '',
                src: "http://absol.cf/share/8TEb9p4ec.jpg"
            }
        }), 'right');

    absol.$('#btn5').addStyle({
        position: 'fixed',
        zIndex: '100000',
        left: '10px',
        top: '10px',
        display:'block',
        background: 'cyan'
    }).on('click', function () {
        var bound = this.getBoundingClientRect();
        var screenSize = absol.Dom.getScreenSize();


        absol.Tooltip.show(this, absol._({
            tag: 'img', style: { height: "10em" },
            attr: {
                crossorigin: '',
                src: "http://absol.cf/share/8TEb9p4ec.jpg"
            }
        }), 'auto');
        var bt = this;
        document.addEventListener('mousemove', function (event) {
            bt.addStyle({
                left: event.clientX - bound.width / 2 + 'px',
                top: event.clientY - bound.height / 2 + 'px'
            });
            absol.Tooltip.updatePosition();
        });
    });

    var LanguageModule = {
        text2: function(key, value) {
            return key+':' +value.join(',');
        }
    };
    var ten_bien = 'varx';
    absol._({
        tag:'CopyableIconTooltip'.toLowerCase(),
        props:{
            content:"<mlt key=\"txt_variable_copy_tooltip\" v0=\""+ten_bien+"\"></mlt>"
        }
    }).addTo(absol.$('.test-ctn'));

</script>
<script src="https://absol.cf/absol/demo/autohightlighting.js"></script>

</body>

</html>

VaKeR 2022