JSFiddle - React, Tailwind, and code Playground

HTML

<p>An <span class="more_info" title="also called an underscore">underline</span> character is used here</p>

CSS

.more_info {
  border-bottom: 1px dotted;
  position: relative;
}

.more_info .title {
    position: absolute;
    top: 20px;
    background: silver;
    padding: 4px;
    left: 0;
    white-space: nowrap;
}

JavaScript

$(".more_info").click(function () {
    var $title = $(this).find(".title");
    if (!$title.length) {
        $(this).append('<span class="title">' + $(this).attr("title") + '</span>');
    } else {
        $title.remove();
    }
});