Bootstrap v4 alpha6 tooltips don't hide with clipboardjs

[ghost]

Hi,
I want to have on my page multiple code examples with clipboardjs bootstrap buttons and tooltips. I followed this example, but I want to generate all buttons at once instead of writing

$('#copy1').tooltip({
    title: 'Copied!',
    animation: false,
    delay: 0,
    trigger: 'click',
    placement: 'right'
});

var clipboard = new Clipboard('#copy1', {
    text: function(trigger) {
        return $(trigger).next().text(); 
    }
})

clipboard.on('success', function(e) {
    $('#copy1').tooltip('show');
    setTimeout(function() {
        $('#copy1').tooltip('hide');
    }, 1000);
});

for each button. I have decided to write for loop but now Bootstrap tooltips don't hide. Could you help me ?

Thanks in advance ! :)

[ghost]

I have successfully dealt with this problem :)

Instead of:

$('#copy1').tooltip({
    title: 'Copied!',
    animation: false,
    delay: 0,
    trigger: 'click',
    placement: 'right'
});

I did:

var n = $(this).tooltip({
    title: 'Copied!',
    animation: false,
    delay: 0,
    trigger: 'manual',
    placement: 'left'
});

var clipboard = new Clipboard('#' + $(this).attr('id'), {
    text: function(trigger){
        return $(trigger).next().text(); 
    }
});

clipboard.on('success', function(){
    n.tooltip('show');
    setTimeout(function(){
        n.tooltip('hide');
    }, 1000);
});

[colinwilson]

I'm experiencing a similar issue

Using Bootstrap 4 (v4.0.0-beta.3)

I'm using the following to copy generated text inside one of many modals on a page. Each modal is launched from a button in a table generated by Datatables and contains the copy button I'm trying to use with clipboard.js:
html (generated by laravel):

<p><span>{{generated_txt}}</span> &nbsp;<img class="cp-btn" src="../img/copy_icon.svg" alt="copy to clipboard"></p>

// tooltip
$('.cp-btn').tooltip({
  trigger: 'click',
  placement: 'right'
});

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

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

// clipboard.js
var clipboard = new Clipboard('.cp-btn', {
    target: function(trigger) {
        return trigger.previousElementSibling;
    }
});

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

clipboard.on('error', function(e) {
    setTooltip('Failed!');
    hideTooltip();
});

The text is successfully copied but afterwards hovering over the copy icon/button triggers the tooltip. This goes for all the other copy buttons on the page.

Any tips on how I can resolve this?

[colinwilson]

Figured out and resolved.

Was an issue with Laravel Datatables (https://github.com/yajra/laravel-datatables/issues/741)