Как разместить всплывающую подсказку к нужному элементу списка? - PullRequest
Новая
       39

Как разместить всплывающую подсказку к нужному элементу списка?

0 голосов
/ 01 февраля 2019

Я хочу объединить Bootstrap 4, ClipboardJS и всплывающие подсказки (PopperJS).

Мой код работает до сих пор: когда я нажимаю на кнопку, значение поля «data-clipboard-text» равносохранено в буфере обмена.Но всплывающие подсказки не отображаются и не скрываются, потому что я не знаю, как вставить правильную кнопку в функцию.

HTML (есть список из n кнопок с различными значениями в поле «data-clipboard-text»): 

<button class="btn btn-secondary btn-sm" data-clipboard-text="25" data-toggle="tooltip" data-placement="top">Copy to clipboard</button>
<button class="btn btn-secondary btn-sm" data-clipboard-text="51" data-toggle="tooltip" data-placement="top">Copy to clipboard</button>
<button class="btn btn-secondary btn-sm" data-clipboard-text="178" data-toggle="tooltip" data-placement="top">Copy to clipboard</button>
[…] 
<button class="btn btn-secondary btn-sm" data-clipboard-text="2" data-toggle="tooltip" data-placement="top">Copy to clipboard</button>

JS: 

<script type="text/javascript">

    // tooltip: enable all items with data-toggle=“tooltip“
    $(function () {
        $('[data-toggle="tooltip"]').tooltip({trigger:'click'})
    });

    function setTooltip(btn, message) {
        $(btn).tooltip('hide')
        .attr('data-original-title', message)
        .tooltip('show');
    }

    function hideTooltip(btn) {
        setTimeout(function() {
            $(btn).tooltip('hide');
            }, 1000);
    }

    // clipboard
    var btns = document.querySelectorAll('button');
    var clipboard = new ClipboardJS(btns);

    clipboard.on('success', function(e) {
        setTooltip(btns, 'Copied!');
        console.log(e);
    });

    clipboard.on('error', function(e) {
        hideTooltip(btns);
        console.log(e);
    });

</script>

1 Ответ

0 голосов
/ 03 февраля 2019

Правильным решением для этого является следующий код.

HTML: 

<button class="btn btn-secondary btn-sm" data-clipboard-text="22" data-toggle="tooltip" title="Kopiert!" data-placement="top">Copy to clipboard</button>

JS: 

jQuery(document).ready(function () {

    $('[data-toggle="tooltip"]').tooltip({trigger:'click', delay: {show: 200, hide: 100}});

    function setTooltip(btn) {
        $(btn).tooltip('show');
    }

    $(function () {
        $(document).on('shown.bs.tooltip', function (e) {
            setTimeout(function () {
                $(e.target).tooltip('hide');
            }, 2000);
        });
    });

    var btns = document.querySelectorAll('button');
    var clipboard = new ClipboardJS(btns);

    clipboard.on('success', function(e) {
        setTooltip($(this).btns);
        console.log(e);
    });

});

Успешно протестировано - все кнопки с атрибутом данных«Подсказка» будет активирована первой.После этого, если вы нажмете на любую (!) Кнопку, ее значение data-clipboard-text будет скопировано, и через 2 секунды (изменяемое значение) все всплывающие подсказки снова закроются, даже если вы нажмете более одной кнопки.Да!

...