From 62e484b2994bdef103abaeb2322bf820e474f714 Mon Sep 17 00:00:00 2001 From: DT27 Date: Mon, 12 Feb 2018 08:56:12 +0800 Subject: [PATCH] Use Bootstrap tooltips. --- public/css/shorten_result.css | 2 -- public/js/shorten_result.js | 24 ++++++++---------------- resources/views/shorten_result.blade.php | 9 +++++---- 3 files changed, 13 insertions(+), 22 deletions(-) diff --git a/public/css/shorten_result.css b/public/css/shorten_result.css index cbe9574..5871b22 100644 --- a/public/css/shorten_result.css +++ b/public/css/shorten_result.css @@ -30,5 +30,3 @@ padding:0px 10px; cursor: pointer; } - -.tooltipped{position:relative}.tooltipped:after{position:absolute;z-index:1000000;display:none;padding:5px 8px;font:normal normal 11px/1.5 Helvetica,arial,nimbussansl,liberationsans,freesans,clean,sans-serif,segoe ui emoji,segoe ui symbol;color:#fff;text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:rgba(0,0,0,.8);border-radius:3px;-webkit-font-smoothing:subpixel-antialiased}.tooltipped:before{position:absolute;z-index:1000001;display:none;width:0;height:0;color:rgba(0,0,0,.8);pointer-events:none;content:"";border:5px solid transparent}.tooltipped:hover:before,.tooltipped:hover:after,.tooltipped:active:before,.tooltipped:active:after,.tooltipped:focus:before,.tooltipped:focus:after{display:inline-block;text-decoration:none}.tooltipped-multiline:hover:after,.tooltipped-multiline:active:after,.tooltipped-multiline:focus:after{display:table-cell}.tooltipped-s:after,.tooltipped-se:after,.tooltipped-sw:after{top:100%;right:50%;margin-top:5px}.tooltipped-s:before,.tooltipped-se:before,.tooltipped-sw:before{top:auto;right:50%;bottom:-5px;margin-right:-5px;border-bottom-color:rgba(0,0,0,.8)}.tooltipped-se:after{right:auto;left:50%;margin-left:-15px}.tooltipped-sw:after{margin-right:-15px}.tooltipped-n:after,.tooltipped-ne:after,.tooltipped-nw:after{right:50%;bottom:100%;margin-bottom:5px}.tooltipped-n:before,.tooltipped-ne:before,.tooltipped-nw:before{top:-5px;right:50%;bottom:auto;margin-right:-5px;border-top-color:rgba(0,0,0,.8)}.tooltipped-ne:after{right:auto;left:50%;margin-left:-15px}.tooltipped-nw:after{margin-right:-15px}.tooltipped-s:after,.tooltipped-n:after{-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%)}.tooltipped-w:after{right:100%;bottom:50%;margin-right:5px;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%)}.tooltipped-w:before{top:50%;bottom:50%;left:-5px;margin-top:-5px;border-left-color:rgba(0,0,0,.8)}.tooltipped-e:after{bottom:50%;left:100%;margin-left:5px;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%)}.tooltipped-e:before{top:50%;right:-5px;bottom:50%;margin-top:-5px;border-right-color:rgba(0,0,0,.8)}.tooltipped-multiline:after{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:250px;word-break:break-word;word-wrap:normal;white-space:pre-line;border-collapse:separate}.tooltipped-multiline.tooltipped-s:after,.tooltipped-multiline.tooltipped-n:after{right:auto;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.tooltipped-multiline.tooltipped-w:after,.tooltipped-multiline.tooltipped-e:after{right:100%}@media screen and (min-width:0\0){.tooltipped-multiline:after{width:250px}}.tooltipped-sticky:before,.tooltipped-sticky:after{display:inline-block}.tooltipped-sticky.tooltipped-multiline:after{display:table-cell}.fullscreen-overlay-enabled.dark-theme .tooltipped:after{color:#000;background:rgba(255,255,255,.8)}.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-s:before,.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-se:before,.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-sw:before{border-bottom-color:rgba(255,255,255,.8)}.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-n:before,.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-ne:before,.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-nw:before{border-top-color:rgba(255,255,255,.8)}.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-e:before{border-right-color:rgba(255,255,255,.8)}.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-w:before{border-left-color:rgba(255,255,255,.8)} \ No newline at end of file diff --git a/public/js/shorten_result.js b/public/js/shorten_result.js index 3406544..1c7f32f 100644 --- a/public/js/shorten_result.js +++ b/public/js/shorten_result.js @@ -23,24 +23,16 @@ $('#generate-qr-code').click(function () { }); -var clipboardDemos = new Clipboard('[data-clipboard-demo]'); -clipboardDemos.on('success', function(e) { +var clipboard = new Clipboard('[data-clipboard]'); +clipboard.on('success', function(e) { e.clearSelection(); - showTooltip(e.trigger, 'Copied!'); + $('[data-clipboard]').tooltip('show'); +}); +$('[data-clipboard]').on('blur',function () { + $(this).tooltip('destroy') +}).on('mouseleave',function () { + $(this).tooltip('destroy') }); -var btns = document.querySelectorAll('.input-group-addon'); -for (var i = 0; i < btns.length; i++) { - btns[i].addEventListener('mouseleave', clearTooltip); - btns[i].addEventListener('blur', clearTooltip); -} -function clearTooltip(e) { - e.currentTarget.setAttribute('class', 'input-group-addon'); - e.currentTarget.removeAttribute('aria-label'); -} -function showTooltip(elem, msg) { - elem.setAttribute('class', 'input-group-addon tooltipped tooltipped-s'); - elem.setAttribute('aria-label', msg); -} $(function () { original_link = $('.result-box').val(); diff --git a/resources/views/shorten_result.blade.php b/resources/views/shorten_result.blade.php index 1a7905a..f1df3cf 100644 --- a/resources/views/shorten_result.blade.php +++ b/resources/views/shorten_result.blade.php @@ -7,8 +7,10 @@ @section('content')

Shortened URL

- -
Copy to clipboard
+ +
+ +
Generate QR Code Shorten another @@ -20,7 +22,6 @@ @section('js') - - + @endsection