我有一个包含两个textarea
和两个button
的页面,按下时会将每个textarea
的内容分别复制到用户的剪贴板。按下按钮并且复制成功后,工具提示会显示Copied!
。根据我之前设置的方式,当按下1个按钮时,会显示两个按钮的工具提示,而不仅仅是按下的按钮(参见here)。
$('button').tooltip({
trigger: 'click',
placement: 'bottom'
});
function setTooltip(message) {
$('button').tooltip('hide')
.attr('data-original-title', message)
.tooltip('show');
}
function hideTooltip() {
setTimeout(function() {
$('button').tooltip('hide');
}, 1000);
}
var clipboard = new Clipboard('button');
clipboard.on('success', function(e) {
e.clearSelection();
setTooltip('Copied!');
hideTooltip();
});
clipboard.on('error', function(e) {
e.clearSelection();
setTooltip('Failed!');
hideTooltip();
});
在基本上复制了上面的代码之后,我设法使它只显示了一个工具提示,只显示了点击的按钮(参见here),但这似乎是一种非常初学的方法(我是谁。
答案 0 :(得分:4)
您不需要创建Bootstrap工具提示的两个实例,因为Clipboard.js会返回您单击的按钮(e.trigger
)。
$('button').tooltip({
trigger: 'click',
placement: 'bottom'
});
function setTooltip(btn, message) {
$(btn).tooltip('hide')
.attr('data-original-title', message)
.tooltip('show');
}
function hideTooltip(btn) {
setTimeout(function() {
$(btn).tooltip('hide');
}, 1000);
}
var clipboard = new Clipboard('button');
clipboard.on('success', function(e) {
e.clearSelection();
setTooltip(e.trigger, 'Copied!');
hideTooltip(e.trigger);
});
clipboard.on('error', function(e) {
e.clearSelection();
setTooltip(e.trigger, 'Failed!');
hideTooltip(e.trigger);
});
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
<div class="row">
<div class="col-sm-12">
<div class="panel-body text-center">
<h4>Textarea 1</h4>
<textarea id="testarea1">Some text in testarea 1...</textarea><br><br>
<button class="btn btn-primary" data-clipboard-target="#testarea1">Copy to clipboard</button>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="panel-body text-center">
<h4>Textarea 2</h4>
<textarea id="textarea2">Some text in textarea 2...</textarea><br><br>
<button class="btn btn-primary" data-clipboard-target="#textarea2">Copy to clipboard</button>
</div>
</div>
</div>
答案 1 :(得分:0)
相同的解决方案,但示例有所不同:也许这是一个高级示例:
<ul>
<li>
<button type="button" class="btn-tooltip" data-clipboard-text="e1" >E1</button>
</li>
<li>
<button type="button" class="btn-tooltip" data-clipboard-text="e2" >E2</button>
</li>
</ul>
和可爱的javascript:
<script>
$('.btn-tooltip').tooltip({
trigger: 'click',
placement: 'bottom'
});
function setTooltip(btn, message) {
$(btn).tooltip('hide').attr('data-original-title', message).tooltip('show');
}
function hideTooltip(btn) {
setTimeout(function() {
$(btn).tooltip('hide');
}, 1000);
};
var clipboard = new ClipboardJS('.btn-tooltip');
clipboard.on('success', function(e) {
e.clearSelection();
setTooltip(e.trigger, 'Copied!');
hideTooltip(e.trigger);
});
clipboard.on('error', function(e) {
e.clearSelection();
setTooltip(e.trigger, 'Failed!');
hideTooltip(e.trigger);
});
</script>
new ClipboardJS('.btn-tooltip')
并非所有按钮。 注意。