7

要素の「クリックしてコピー」機能にZeroClipboardを使用し、同時にブートストラップのツールチップを表示しようとしています。

残念ながら、要素で ZeroClipboard を使用すると、ツールチップが機能しません。どんな助けでも大歓迎です...

// 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);
});
4

8 に答える 8

6

非常に簡単な方法で機能させることができました

var zero = new ZeroClipboard($el);
$(zero.htmlBridge).tooltip({title: "copy to clipboard", placement: 'bottom'});
于 2013-07-01T15:26:17.433 に答える
2

すべてのスニペットをまとめて機能させるのが難しい場合があります... これは、ZeroClipboard 1.3.2 と Bootstrap 3.1.0 を使用した完全なソリューションです。

HTML:

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

ZeroClipboard は、ID がglobal-zeroclipboard-html-bridgeのコンテナーを作成します。これは Bootstrap ツールチップのアクセス ポイントです。

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');
});
于 2014-02-22T09:49:47.473 に答える
1

ZeroClipboard の後にTooltip を実行すると、問題なく動作するはずです!

于 2015-06-29T10:27:51.543 に答える
0

Bootstrapのクリック時にツールチップを表示することで回避策を見つけましたが、ZeroClipboardのフックを使用して、ホバー時に表示および非表示にします。

これが私がそれをした方法です：

$('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');
}
于 2012-12-18T18:32:43.480 に答える
0

バグは既知の問題であり、ここで言及されています: 問題を引き起こす Zeroclipboard バグ: @ https://github.com/zeroclipboard/zeroclipboard/issues/369を参照してください。

于 2016-02-20T03:12:57.463 に答える
0

Zero Clipboard 2.2 と Bootstrap 3 を使用すると、このように動作するようになりました

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

1 行目のセレクターを変更します。

セレクターは#global-zeroclipboard-html-bridge、Zero Clipboard コンポーネントによって挿入され、コピー ボタンをオーバーレイする div をターゲットにします。

于 2015-03-30T12:57:25.150 に答える