Tooltip Popup On Text Selection – TextTip

Category: Javascript , Text | July 31, 2019
Author: AdamJaggard
Views Total: 942 views
Official Page: Go to website
Last Update: July 31, 2019
License: MIT

Preview:

Tooltip Popup On Text Selection – TextTip

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:

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'
});

You Might Be Interested In:


One thought on “Tooltip Popup On Text Selection – TextTip

  1. arshad khatri

    i have a problem,

    when i tried to click on tooltip icon but it not working.

    i had tried to call a function and add a class in in icon then create script for text bold, italic etc..
    but when we click on button it’s not working because it’s considered tag and is not clickable.

    so can you explain how can i put button type submit on tooltip icon?

    thank you.

    Reply

Leave a Reply