JSFiddle - React, Tailwind, and code Playground

by Javier Puértolas

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


// Define the id of your board in BOARDID

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-1, 5, 5, -1],
    axis: true
});

var radio = board.create('text', [2, 3, `
<input type="radio" name="myradio" value="1" onchange="change(this);">1<br/>
<input type="radio" name="myradio" value="2" onchange="change(this);">2<br/>
<input type="radio" name="myradio" value="3" onchange="change(this);">3<br/>
`], {fixed: true, frozen: true});

// Event handler
window.change = function(src) {
    alert(src.value);
}