Question

在每个图像下，我都有一个按钮，用于打开模式对话框，您可以在其中将链接复制到图像。模态内有一个带有工具提示的复制按钮。

我为打开模态时要复制的输入字段设置值。
复制时，工具提示将从“复制链接”更改为“复制链接”。
然后，我需要重置工具提示，以便在打开下一个模式时再次显示“复制链接”。

有趣的是，如果您打开另一个模式，则工具提示将颠倒。
如果将鼠标悬停在“复制”按钮上并再次悬停，则工具提示将正常显示。
更有趣的是，它仅发生在其他模态上。如果我打开与以前相同的模式，则不会发生。

模式：

<div class="modal fade modal-erahs" id="erahsModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Link zum Bild</h5>
            </div>
            <div class="modal-body">

                <div class="input-group mt-3">
                    <input id="toCopy" class="form-control" type="text" aria-label="Recipient's username" aria-describedby="button-addon2" readonly>
                    <div class="input-group-append">
                        <button id="copyIt" class="btn btn-secondary" type="button" data-clipboard-action="copy" data-clipboard-target="#toCopy" data-toggle="tooltip" data-placement="top" title="Link kopieren">Copy</button>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
            </div>

        </div>
    </div>
</div>

打开模态的按钮：

<button class="btn btn-sm btn-own btn-erahs" type="button" data-toggle="modal" data-target="#erahsModal" data-url="{{ entry.getUrl() }}" data-imgid="{{ image.id }}">Bild teilen</button>

JS：

$(document).ready(function(){

    var clipboard = new ClipboardJS('#copyIt');

    clipboard.on('success', function(e) {
      console.log(e);
      linkCopied();
    });

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

    $('[data-toggle="tooltip"]').tooltip()

    function linkCopied() {
      $('#copyIt').attr('data-original-title', 'Der Link wurde kopiert!').tooltip('show');
    }

    // Share Modal
    $('#erahsModal').on('show.bs.modal', function (e) {
      var modal  = $(this);
      var button = $(e.relatedTarget);
      var url    = button.data('url');
      var imgId  = button.data('imgid');
      modal.find('#toCopy').val(url+"#"+imgId);
    });

    $('#erahsModal').on('hidden.bs.modal', function (e) {
      var modal  = $(this);
      modal.find('#copyIt').attr('data-original-title', 'Link kopieren.');
    });

});

重置后，Bootstrap工具提示以模态倒置显示

0 个答案: