Medium Inspired Floating Popup For Selected Text – WebClip

Preview:

Description:

WebClip is a native JavaScript library which displays a floating toolbar with custom icons and actions when the user selects a piece of text. Inspired by Medium’s floating text editor.

Basic usage:

First you have to include the WebClip’s JavaScript & CSS files on the html page.

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

Include the OPTIONAL Font Awesome for toolbar icons.

<link rel="stylesheet" href="/path/to/font-awesome.min.css">

Create a new WebClip object.

var myDemo = new WebClip(document.querySelector('#demo'))

Add custom icons & actions to the floating toolbar.

myDemo.use([...])