Clipboard and Tooltip (Bootstrap)

An Experiment


geeky stuff
#clipboardjs | #tooltip | #bootstrap

This is probably going to be the last entry posted before I go through a hectic phase as a mom to a newborn and a toddler.

I mentioned in one of my previous entries (link is provided above) that it would be fun if there is a tooltip displayed following the click on a clipboard button that lets us copy text.

Please note though that I have no intention of using it as a replacement to my initial setting of showing the tooltips. The slightly-hacked-and-adopted codes I provided below just serves as an experiment for this particular purpose using clipboardjs, bootstrap tooltip component and jquery.

It displays a tooltip saying, “Copy to clipboard” whenever the mouse pointer is hovered on the clipboard button and then when the button is clicked, a tooltip with “Copied!” message appears provided there is no error occurrs.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

<script>
(function($) {
  'use strict'

  $(function() {

    $('.clip').before('<button class="btn btn-primary button-demo" data-clipboard-target><i class="fa fa-copy"></i></button>')
    $('[data-clipboard-target]')
      .tooltip({
        title: 'Copy to clipboard',
        placement: 'left',
      })

    var clipboard = new Clipboard('[data-clipboard-target]', {
      target: function(trigger) {
        return trigger.nextElementSibling
      }
    })

    clipboard.on('success', function(e) {
      e.clearSelection()
      $(e.trigger)
        .attr('data-original-title', 'Copied!')
        .tooltip('show')
        .blur()
        .attr('data-original-title', 'Copy to clipboard')
    })

    clipboard.on('error', function(e) {
      var modifierKey = /Mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
      var fallbackMsg = 'Press ' + modifierKey + 'C to copy'

      $(e.trigger)
        .attr('data-original-title', fallbackMsg)
        .tooltip('show')
        .blur()
        .attr('data-original-title', 'Copy to clipboard')
    })

  })

}(jQuery))
</script>
<div class="clip clip-demo">
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</div>

<div class="clip clip-demo" contenteditable="true">
  Feel free to type anything here.
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

/* CUSTOM CSS */

.clip-demo {
  font-size: 95%;
  padding: .5em;
  display: flex;
  line-height: normal;
  width: auto;
  margin: auto;
  margin-bottom: 2em;
  border: 1px solid #ccc;
  border-radius: 2px;
}

.button-demo {
  float: right;
  overflow: hidden;
}


Kali terakhir halaman ini dikemaskini/disemak semula adalah pada .
Top