Demo Page: QR Code in a Tooltip

The Effect

A tooltip filled with a client-side generated QR code, which encodes current page URL. I created this as an experimental home-made sharing button.

Try it:

How to

Things used in this demo:

• jQuery;
• jQuery Tooltipster plugin for tooltip implementation;
• jQuery QR code plugin for client-side QR code generation;
• Font Awesome for the icon.

Steps:

1. Create an object to have the tooltip;
2. Set the title of that object to the HTML code decribing a container, with specified size and optional caption;
3. Use Tooltipster to make a tooltip, set desired options, and in functionReady part EMPTY the container and call qrcode to put the code in it;
4. Profit!

Caveats

Be sure to set the container and the tooltip to the correct size! Otherwise the tooltip will have positioning issues.

The code:

<a href="#" onclick="return false;" id="sharebtn" title="<div id='qrcode' style='width: 256px; height: 260px;'><img src='/assets/processing/qrbackground.png'/></div><figcaption>Scan the QR code on your mobile device!</figcaption>"><i class="fa fa-qrcode" ></i></a>

<script>
  $(document).ready(function() {
    $('#sharebtn').tooltipster({
      theme: 'tooltipster-shadow',
      contentAsHTML: true,
      trigger: 'click',
      maxwidth: 256,
      functionReady: function() {
        $('#qrcode').empty().qrcode({
          width: 256,
          height: 256,
          text: window.location.href
        });
      }
    });
    $('#sharebtn').tooltipster('reposition');
  });
</script>