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

Made the Copy button tooltip prettier.

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