Bootstrap + Zeroclipboard = Chú giải công cụ không thể hiển thị khi di chuột?

Question

Tôi đang cố gắng sử dụng ZeroClipboard cho tính năng "Nhấp để sao chép" trên một phần tử và đồng thời hiển thị chú giải công cụ khởi động.

Thật không may, chú giải công cụ không hoạt động nếu tôi sử dụng ZeroClipboard trên một phần tử. Bất kỳ trợ giúp sẽ được đánh giá cao ...

// 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

tìm thấy một workaround bằng cách đặt các tooltip được hiển thị trên nhấp chuột cho Bootstrap, nhưng sau đó sử dụng móc trong ZeroClipboard để hiển thị và ẩn nó khi di chuột.

Sau đây là cách tôi đã làm nó:

$('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

Cũ câu hỏi nhưng gần đây tôi gặp phải vấn đề này và đã có thể tìm ra một giải pháp, đó là khá đơn giản nhưng một chút chăn. Bởi vì phần tử flash vị trí chính nó với một zindex 10000 trên đầu trang của bất kỳ yếu tố bạn có trên trang, bạn sẽ phải nối thêm phần tử flash với một bộ chọn và tiêu đề. Điều này có thể được thực hiện với các cuộc gọi lại của ZeroClipboard.

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

Answer 3

Quản lý để làm cho nó làm việc trong một cách rất đơn giản

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

Answer 4

Thêm vào câu trả lời @ gnorsilva của. Đây là cách tôi đặt văn bản mới trên tooltip khi nó đã được sao chép thành công:

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

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

này đạt được hiệu quả tương tự như GitHub khi bạn nhấp vào một trong các yếu tố ZeroClipboard của họ như copy SHA hay khi bạn nhấp vào nút clone URL

Answer 5

Đôi khi rất khó để có được tất cả các đoạn với nhau và làm việc ... đây là một giải pháp hoàn chỉnh sử dụng ZeroClipboard 1.3.2 và 3.1.0 Bootstrap:

HTML:

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

ZeroClipboard tạo một container với ID toàn cầu-zeroclipboard-html-cầu, đây là điểm truy cập cho Bootstrap Tooltip.

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

Với Zero Clipboard 2.2 và Bootstrap 3 Tôi đã nhận nó làm việc như

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'); 
}); 

Thay đổi này chọn trên một dòng.

bộ chọn #global-zeroclipboard-html-bridge nhắm mục tiêu một div được chèn bởi thành phần Clipboard bằng 0 và phủ lên nút sao chép.

Answer 7

Nếu bạn chạy Chú giải công cụ sau ZeroClipboard, nó sẽ hoạt động mà không gặp vấn đề gì!

Answer 8

lỗi là một vấn đề được biết đến và đề cập ở đây: lỗi Zeroclipboard gây ra vấn đề: xem @https://github.com/zeroclipboard/zeroclipboard/issues/369