[JavaScript] Show Note on Mouse Hovering Over Text

See demo first. Move the cursor (mouse pointer) to hover over the italic text with underline: (demo texts from here)

　　我聽到這樣：
　　有一次， 世尊 住在舍衛城祇樹林給孤獨園。
　　在那裡，世尊召喚 比丘 們：「比丘們！」

To achieve the effect of the demo, you need to wrap the texts with notes in the em element (i.e., make texts italic) in the HTML.

Next, add the following rules to your CSS code:

CSS:

em {
  text-decoration: underline;
  cursor: pointer;
}

.invisible {
    display: none;
}

.tooltip {
    position: absolute;
    background-color: yellow;
    border: 1px gray solid;
    border-radius: 3px;
    padding: 3px;
}

First rule says add underline to the text in the em element, and also make the mouse cursor become pointer on hover over.
Second rule, as the name suggests, is used to make element invisible.
Third rule is used to style the tooltip box that shows the note of the text.

Then add the following to your JavaScript code:

JavaScript:

var notes = {
  "世尊": "Note of 世尊",
  "比丘": "Note of 比丘"
};

// create and append invisible tooltip to DOM tree
var tooltip = document.createElement("div");
tooltip.classList.add("tooltip");
tooltip.classList.add("invisible");
document.querySelector("body").appendChild(tooltip);

// event handler for mouseenter event of italic text
function ShowTooltip(e) {
  var elm = e.target;
  var key = elm.textContent;
  if (notes.hasOwnProperty(key)) {
    tooltip.textContent = notes[key];
    tooltip.style.left = elm.getBoundingClientRect().left + window.pageXOffset + 'px';
    tooltip.style.top = (elm.getBoundingClientRect().top + window.pageYOffset + elm.offsetHeight + 5) + 'px';
    tooltip.classList.remove("invisible");
  }
}

// event handler for mouseleave event of italic text
function HideTooltip(e) {
  tooltip.classList.add("invisible");
}

// select all italic texts and attach mouseenter and mouseleave event handler
var ems = document.querySelectorAll("em");
for (var i = 0; i < ems.length; ++i) {
  var em = ems[i];
  em.addEventListener("mouseenter", ShowTooltip);
  em.addEventListener("mouseleave", HideTooltip);
}

In the JavaScript code:

First use object literal syntax to define notes of texts.
create and append a tooltip (div element) to the HTML body. The tooltip is used to show note on mouse hovering over the italic text. The tooltip is invisible in the beginning.
Define mouseenter and mouseleave event handler to texts wrapped in em element. In mouseenter handler we show the note of the text, and in mouseleave handler we make the note of the text invisible.
Use querySelectorAll to find all em elements, and attach corresponding mouseenter/mouseleave event handlder to show/hide notes of texts.

Tested on: Chromium Version 63.0.3239.84 (Official Build) Built on Ubuntu , running on Ubuntu 17.10 (64-bit)

References:

[1]	Pure CSS Tooltip and JavaScript Implementation

[2]	JavaScript DOM Element Position (Scroll Position Included)