joegaffey/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Basic annotation UI">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <p>
    I will arise and go now, and go to Innisfree,
    And a small cabin build there, of clay and wattles made;
    Nine bean-rows will I have there, a hive for the honey-bee,
    And live alone in the bee-loud glade.
  </p>
  <p>
    And I shall have some peace there, for peace comes dropping slow,
    Dropping from the veils of the morning to where the cricket sings;
    There midnight’s all a glimmer, and noon a purple glow,
    And evening full of the linnet’s wings.
  </p>
  <p>
    I will arise and go now, for always night and day
    I hear lake water lapping with low sounds by the shore;
    While I stand on the roadway, or on the pavements grey,
    I hear it in the deep heart’s core.
  </p>
<style id="jsbin-css">
.selected {
  background-color: orange;
}

.tooltip {
  display: none;
  background-color: black;
  color: white;
  padding: 4px;
  position: absolute;
  margin-left: 10;
  margin-top: 15px;
}

.selected:hover .tooltip {
  display: inline-block;
}

p {
  /* position: relative; */
  font-family: helvetica;
}
</style>
</head>
<body>

<script id="jsbin-javascript">

let timer;

function debounce(callback, delay) {
  timer = setTimeout(() => {
    callback()
  }, delay);
}

function handleSelection(){
  let selection = document.getSelection();
  let selectedText = selection.toString();
  if(selectedText.trim().length > 1 && selection.baseNode == selection.extentNode) {
    let range = selection.getRangeAt(0);
    selection.empty();
    let comment = prompt('Enter comment');
    if(comment.length < 1) {
      return;
    }
    makeComment(range, comment);
  }
}

function makeComment(range, comment) {
  let span = document.createElement('span');
  span.className = 'selected';
  span.appendChild(range.extractContents());
  range.insertNode(span);
  let tooltip = document.createElement('span');
  tooltip.className = 'tooltip';
  tooltip.innerText = comment;
  span.prepend(tooltip);
}

document.onselectionchange = () => {
  debounce(handleSelection, 1000);
};
</script>


<script id="jsbin-source-css" type="text/css">.selected {
  background-color: orange;
}

.tooltip {
  display: none;
  background-color: black;
  color: white;
  padding: 4px;
  position: absolute;
  margin-left: 10;
  margin-top: 15px;
}

.selected:hover .tooltip {
  display: inline-block;
}

p {
  /* position: relative; */
  font-family: helvetica;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">
let timer;

function debounce(callback, delay) {
  timer = setTimeout(() => {
    callback()
  }, delay);
}

function handleSelection(){
  let selection = document.getSelection();
  let selectedText = selection.toString();
  if(selectedText.trim().length > 1 && selection.baseNode == selection.extentNode) {
    let range = selection.getRangeAt(0);
    selection.empty();
    let comment = prompt('Enter comment');
    if(comment.length < 1) {
      return;
    }
    makeComment(range, comment);
  }
}

function makeComment(range, comment) {
  let span = document.createElement('span');
  span.className = 'selected';
  span.appendChild(range.extractContents());
  range.insertNode(span);
  let tooltip = document.createElement('span');
  tooltip.className = 'tooltip';
  tooltip.innerText = comment;
  span.prepend(tooltip);
}

document.onselectionchange = () => {
  debounce(handleSelection, 1000);
};</script></body>
</html>

## jsbin.xogegejowe.css
.selected {
  background-color: orange;
}

.tooltip {
  display: none;
  background-color: black;
  color: white;
  padding: 4px;
  position: absolute;
  margin-left: 10px;
  margin-top: 20px;
}

.selected:hover .tooltip {
  display: inline-block;
}

p {
  font-family: helvetica;
}

## jsbin.xogegejowe.js

let timer;

function debounce(callback, delay) {
  timer = setTimeout(() => {
    callback()
  }, delay);
}

function handleSelection(){
  let selection = document.getSelection();
  let selectedText = selection.toString();
  if(selectedText.trim().length > 1 && selection.baseNode == selection.extentNode) {
    let range = selection.getRangeAt(0);
    selection.empty();
    let comment = prompt('Enter comment');
    if(comment.length < 1) {
      return;
    }
    makeComment(range, comment);
  }
}

function makeComment(range, comment) {
  let span = document.createElement('span');
  span.className = 'selected';
  span.appendChild(range.extractContents());
  range.insertNode(span);
  let tooltip = document.createElement('span');
  tooltip.className = 'tooltip';
  tooltip.innerText = comment;
  span.prepend(tooltip);
}

document.onselectionchange = () => {
  debounce(handleSelection, 1000);
};
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Basic annotation UI">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<p>
	I will arise and go now, and go to Innisfree,
	And a small cabin build there, of clay and wattles made;
	Nine bean-rows will I have there, a hive for the honey-bee,
	And live alone in the bee-loud glade.
	</p>
	<p>
	And I shall have some peace there, for peace comes dropping slow,
	Dropping from the veils of the morning to where the cricket sings;
	There midnight’s all a glimmer, and noon a purple glow,
	And evening full of the linnet’s wings.
	</p>
	<p>
	I will arise and go now, for always night and day
	I hear lake water lapping with low sounds by the shore;
	While I stand on the roadway, or on the pavements grey,
	I hear it in the deep heart’s core.
	</p>
	<style id="jsbin-css">
	.selected {
	background-color: orange;
	}

	.tooltip {
	display: none;
	background-color: black;
	color: white;
	padding: 4px;
	position: absolute;
	margin-left: 10;
	margin-top: 15px;
	}

	.selected:hover .tooltip {
	display: inline-block;
	}

	p {
	/* position: relative; */
	font-family: helvetica;
	}
	</style>
	</head>
	<body>

	<script id="jsbin-javascript">

	let timer;

	function debounce(callback, delay) {
	timer = setTimeout(() => {
	callback()
	}, delay);
	}

	function handleSelection(){
	let selection = document.getSelection();
	let selectedText = selection.toString();
	if(selectedText.trim().length > 1 && selection.baseNode == selection.extentNode) {
	let range = selection.getRangeAt(0);
	selection.empty();
	let comment = prompt('Enter comment');
	if(comment.length < 1) {
	return;
	}
	makeComment(range, comment);
	}
	}

	function makeComment(range, comment) {
	let span = document.createElement('span');
	span.className = 'selected';
	span.appendChild(range.extractContents());
	range.insertNode(span);
	let tooltip = document.createElement('span');
	tooltip.className = 'tooltip';
	tooltip.innerText = comment;
	span.prepend(tooltip);
	}

	document.onselectionchange = () => {
	debounce(handleSelection, 1000);
	};
	</script>


	<script id="jsbin-source-css" type="text/css">.selected {
	background-color: orange;
	}

	.tooltip {
	display: none;
	background-color: black;
	color: white;
	padding: 4px;
	position: absolute;
	margin-left: 10;
	margin-top: 15px;
	}

	.selected:hover .tooltip {
	display: inline-block;
	}

	p {
	/* position: relative; */
	font-family: helvetica;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">
	let timer;

	function debounce(callback, delay) {
	timer = setTimeout(() => {
	callback()
	}, delay);
	}

	function handleSelection(){
	let selection = document.getSelection();
	let selectedText = selection.toString();
	if(selectedText.trim().length > 1 && selection.baseNode == selection.extentNode) {
	let range = selection.getRangeAt(0);
	selection.empty();
	let comment = prompt('Enter comment');
	if(comment.length < 1) {
	return;
	}
	makeComment(range, comment);
	}
	}

	function makeComment(range, comment) {
	let span = document.createElement('span');
	span.className = 'selected';
	span.appendChild(range.extractContents());
	range.insertNode(span);
	let tooltip = document.createElement('span');
	tooltip.className = 'tooltip';
	tooltip.innerText = comment;
	span.prepend(tooltip);
	}

	document.onselectionchange = () => {
	debounce(handleSelection, 1000);
	};</script></body>
	</html>