Bootstrap + Zeroclipboard = Etykietki narzędzi nie mogą być wyświetlane po najechaniu myszą?

Question

Próbuję użyć ZeroClipboard dla funkcji "Kliknij, aby skopiować" na elemencie i jednocześnie wyświetl etykietę ładowania początkowego.

Niestety, etykieta narzędzia nie działa, jeśli używam ZeroClipboard na elemencie. Każda pomoc będzie mile widziana ...

// BOOTSTRAP TOOLTIP 
$('.myDiv').tooltip({ 
    title:  'Click to copy', 
    placement: 'right', 
    trigger: 'hover', 
    animation: true 
}); 

// ZEROCLIPBOARD 
var clip = new ZeroClipboard.Client(); 
clip.setHandCursor(true); 
$('.myDiv').live('mouseover', function() { 
    clip.setText($(this).text()); 

    if (clip.div) { 
    clip.receiveEvent('mouseout', null); 
    clip.reposition(this); 
    } else clip.glue(this); 

    clip.receiveEvent('mouseover', null); 
}); 

Answer 1

znaleźli obejście poprzez umieszczenie podpowiedź być wyświetlane po kliknięciu na Bootstrap, ale potem za pomocą haków w ZeroClipboard pokazać i ukryć go po najechaniu.

Oto jak to zrobiłem:

$('div.color-inspiration span').tooltip({ 
    title:   'Click to copy', 
    placement: 'right', 
    trigger:  'click', 
    animation: false 
}); 


var element = null; 
var clip = new ZeroClipboard.Client(); 
clip.setHandCursor(true); 
$('div.color-inspiration span').live('mouseover', function() { 
     element = $(this); 

    clip.setText($(this).text()); 

    if (clip.div) { 
     clip.receiveEvent('mouseout', null); 
     clip.reposition(this); 
    } else clip.glue(this); 

    clip.receiveEvent('mouseover', null); 
}); 

clip.addEventListener('onMouseOver', my_mouse_over_handler); 
function my_mouse_over_handler(client) { 
    $(element).tooltip('show'); 
} 

clip.addEventListener('onMouseOut', my_mouse_out_handler); 
function my_mouse_out_handler(client) { 
    $(element).tooltip('hide'); 
} 

clip.addEventListener('onMouseUp', my_mouse_up_handler); 
function my_mouse_up_handler(client) { 
    $(element).tooltip('hide'); 
} 

Answer 2

Stare pytanie, ale ja niedawno napotkał ten problem i był w stanie znaleźć rozwiązanie, to raczej proste, ale nieco koc. Ponieważ element flash ustawia się na zindeksie 10000 na wierzchu elementu, który masz na stronie, musisz dołączyć element flash za pomocą selektora i tytułu. Można to zrobić przy pomocy wywołań ZeroClipboard.

clip.on('load', function(client) { 
     $('#global-zeroclipboard-html-bridge').attr('rel', 'tooltip').attr('title', 'Click Here To Copy URL'); 
    }); 

Answer 3

udało się uzyskać to działa w bardzo prosty sposób

var zero = new ZeroClipboard($el); 
$(zero.htmlBridge).tooltip({title: "copy to clipboard", placement: 'bottom'}); 

Answer 4

dodanie do użytkownika @ gnorsilva odpowiedź. Oto jak ustawić nowy tekst na etykiecie raz została skopiowana pomyślnie:

$(clip.htmlBridge).tooltip({ 
    title:  'copy to clipboard', 
    placement: 'bottom' 
}); 

clip.on('load', function(client) { 
    client.on('complete', function() { 
     $('.tooltip .tooltip-inner').text('copied!'); 
    }); 
}); 

To daje ten sam efekt co GitHub po kliknięciu jednego z ich elementów ZeroClipboard takich jak copy SHA lub po kliknięciu przycisku clone URL

Answer 5

Czasami trudno jest uzyskać wszystkie fragmenty razem i pracować ... to kompletne rozwiązanie z użyciem ZeroClipboard 1.3.2 i 3.1.0 Bootstrap:

HTML:

<a id="copycommand" href="#" data-clipboard-text="text to copy">Copy ...</a> 

ZeroClipboard utworzyć pojemnik z identyfikatorem globalnego zeroclipboard-html-most, to jest punkt dostępu bootstrap podpowiedzi.

jQuery:

// initialize Tooltip 
$('#global-zeroclipboard-html-bridge').tooltip(); 

// ZeroClipboad 
ZeroClipboard.config({ moviePath: 'ZeroClipboard.swf' }); 
var clip = new ZeroClipboard(document.getElementById('copycommand')); 
clip.on('complete', function(client, args){ 
    alert("Copied text to clipboard: " + args.text); 
}); 

// settings for the Tooltip  
clip.on('load', function(client) { 
    $('#global-zeroclipboard-html-bridge').attr({ 
    'data-toggle':'tooltip', 
    'data-title': 'Tooltip text goes here ...', 
    'data-placement': 'bottom', 
    'data-html': true 
    }); 
    // show the tooltip 
    $('#global-zeroclipboard-html-bridge').tooltip('show'); 
}); 

Answer 6

Zero Schowka 2.2 i Bootstrap 3 mam go do pracy jak to

var $copyButton = $('.clipboard'); 
var clip = new ZeroClipboard($copyButton); 

clip 
    .on('ready', function() { 
    $('#global-zeroclipboard-html-bridge').attr({ 
     'data-toggle': 'tooltip', 
     'data-title': 'Copy to clipboard...', 
     'data-placement': 'right' 
    }); 
    $('#global-zeroclipboard-html-bridge').tooltip({ 
     container: 'body', 
     trigger: 'hover' 
    }); 
    }) 
    .on('aftercopy', function() { 
    $('#global-zeroclipboard-html-bridge').tooltip('hide'); 
}); 

Zmian wybierak na jednej linii.

Po wybraniu selektora element div wstawiany jest przez komponent Zero Clipboard i nakłada przycisk kopiowania.

Answer 7

Jeśli uruchomisz Tooltip po ZeroClipboard, powinno działać bez problemów!

Answer 8

błąd jest znany problem i tu wymienić: Zeroclipboard błąd powodujący problem: patrz @https://github.com/zeroclipboard/zeroclipboard/issues/369