Clipboard插件和Tooltip插件实现复制及动态提示

Clipboard是一个将文本复制到剪贴板的插件。

JavaScript代码：

<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"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></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>

HTML代码：

<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>

css代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<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;
}