Tooltip Popup On Text Selection – TextTip

Preview:

Description:

TextTip is a JavaScript library that adds a tooltip style popup to the top of text selections.

It provides a user-friendly interface to interact with selected text in a page. E.g. copy, share, like, etc.

See also:

• Medium Style Text Selection Sharing Library – share-this
• Customizable Popover On Text Selections – Selection-js

How to use it:

Download and insert the text-tip.css and text-tip.js files into the html.

<script src="TextTip.js"></script>
<link rel="stylesheet" href="TextTip.css">

Initialize the library on the text container and specify the buttons to display in the text selection tooltip.

<section class="scope-demo">
  Text Here
</section>

const tooltip = new TextTip({
      scope: '.scope-deme',
      buttons: [
        {title: 'Button 1', icon: 'icon1.svg', callback: callbackFunction1},
        {title: 'Button 2', icon: 'icon2.svg', callback: callbackFunction2},
        {title: 'Button 3', icon: 'icon3.svg', callback: callbackFunction3}
      ]
});

Use an iconic font (e.g. Font Awesome) for the buttons.

<link rel="stylesheet" href="/path/to/fontawesome/all.css">

const tooltip = new TextTip({
      scope: '.scope-deme',
      iconFormat: 'font',
      buttons: [
        {title: 'Button 1', icon: 'far fa-copy', callback: callbackFunction1},
        {title: 'Button 2', icon: 'far fa-share-square', callback: callbackFunction2},
        {title: 'Button 3', icon: 'far fa-heart', callback: callbackFunction3}
      ]
});

It supports SVG sprite as well.

const tooltip = new TextTip({
      scope: '.scope-deme',
      iconFormat: 'svgsprite',
      buttons: [
        {title: 'Button 1', icon: 'sprites.svg#icon-name1', callback: callbackFunction1},
        {title: 'Button 2', icon: 'sprites.svg#icon-name2', callback: callbackFunction2},
        {title: 'Button 3', icon: 'sprites.svg#icon-name3', callback: callbackFunction3}
      ]
});

Decide whether to hide the text selection tooltip on the mobile device. Default: hide.

const tooltip = new TextTip({
      mobileOSBehaviour: 'normal'
});

Set the min/max length of the text selection.

const tooltip = new TextTip({
      minLength: 50, // default: 0
      maxLength: 200 // default: Infinity
});

Callback functions which will be fired when the tooltip is shown and hidden.

const tooltip = new TextTip({
      on: {
        show: Function,
        hide: Function
      }
});

Use your own CSS styles instead.

const tooltip = new TextTip({
      theme: 'none'
});