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 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=""></script>
<script src="" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src=""></script>

(function($) {
  'use strict'

  $(function() {

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

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

    clipboard.on('success', function(e) {
        .attr('data-original-title', 'Copied!')
        .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'

        .attr('data-original-title', fallbackMsg)
        .attr('data-original-title', 'Copy to clipboard')


<div class="container mt-5">

<div class="clip clip-demo">
  "Lorem ipsum dolor sit amet."

<div class="clip clip-demo" contenteditable="true">
  Feel free to type anything here.

<link rel="stylesheet" href="" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="">


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