Bootstrap + Zeroclipboard =悬停时无法显示工具提示?

Hop*_*eam 7 javascript jquery zeroclipboard twitter-bootstrap zeroclipboard-1.x

我正在尝试使用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);
});
Run Code Online (Sandbox Code Playgroud)

gno*_*lva 6

管理以使其以非常简单的方式工作

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


Hop*_*eam 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');
}
Run Code Online (Sandbox Code Playgroud)