Commit 6ec0656e authored by Robert Hitt's avatar Robert Hitt

Made the Copy button tooltip prettier.

parent 05785aff
Pipeline #392 passed with stage
in 3 minutes and 59 seconds
......@@ -9,8 +9,8 @@
<div id="link-container" class="input-group">
<a id="link" class="form-control" href="{{url.short}}">{{domain}}{{url.short}}</a>
<div id="button-container" class="input-group-addon">
<button id="btn" type="button" class="button btn btn-default btn-xs fa" role="button"
data-clipboard-target="#link">
<button id="copy-button" type="button" class="button btn btn-default btn-xs fa" role="button"
data-clipboard-target="#link" title="Copy to Clipboard">
<i id="clipboard-icon" class="fa fa-clipboard fa-1g" aria-hidden="true"></i></button>
</div>
</div>
......
......@@ -21,13 +21,13 @@ pre {
padding-top: 4px;
}
#btn {
#copy-button {
border: none;
background-color: #eeeeee;
padding-bottom: 3px;
}
#btn:focus {
#copy-button:focus {
outline: none;
}
......@@ -38,3 +38,8 @@ pre {
#link-container {
width: 400px;
}
.tooltip-inner {
white-space: nowrap;
max-width: none;
}
......@@ -2,26 +2,20 @@
* Script for copying text and displaying a tooltip.
*/
$('#btn').tooltip({
trigger: 'click',
var clipboard = new Clipboard('#copy-button');
$('#copy-button').tooltip({
trigger: 'hover',
placement: 'bottom'
});
function setTooltip(button, message) {
$(button).tooltip('hide').attr('data-original-title', message)
.tooltip('show');
}
function hideTooltip(button) {
window.setTimeout(function() {
$(button).tooltip('hide');
}, 700);
}
var clipboard = new Clipboard('#btn');
$('#copy-button').on('hidden.bs.tooltip', function () {
$('#copy-button').attr('data-original-title', 'Copy to Clipboard');
});
clipboard.on('success', function(e) {
e.clearSelection();
setTooltip(e.trigger, 'Copied!');
hideTooltip(e.trigger);
$('#copy-button').attr('data-original-title', 'Copied!').tooltip('show');
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment