JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<h2>Need help?</h2>
<ol id="list">
    <li id="paperjam">Paper jam</li>
    <li id="oop">Out of paper</li>
    <li id="phone">Phone doesnt work</li>
    <li id="brain">my brain has failed me</li>
</ol>
<hr>
<div id="infobox">Mouseover one of the items.</div>

CSS

h2{font-size: 24px;font-weight:bold}
ol li{margin-left: 10px}
ol{width: 350px}
ol#list li:before{content:' - '}
#infobox{width:350px;height:100px;background:#ccc;position:absolute;top:0:right:0}

JavaScript

$(document).ready(function() {
    $("#paperjam").bind("mouseover", function(e) {
        var msg = "Your jam message goes here.";
        var h = this.innerHTML;
        $("#infobox").html("<h2>" + this.innerHTML + "</h2>" + msg);
    });

    $("#oop").bind("mouseover", function(e) {
        var msg = "Your paper message goes here.";
        var h = this.innerHTML;
        $("#infobox").html("<h2>" + this.innerHTML + "</h2>" + msg);
    });

    $("#phone").bind("mouseover", function(e) {
        var msg = "Your phone message goes here.";
        var h = this.innerHTML;
        $("#infobox").html("<h2>" + this.innerHTML + "</h2>" + msg);
    });

    $("#brain").bind("mouseover", function(e) {
        var msg = "Your brain message goes here.";
        var h = this.innerHTML;
        $("#infobox").html("<h2>" + this.innerHTML + "</h2>" + msg);
    });

    $("ol#list li").bind("mouseout", function(e) {
        $("#infobox").html("Mouseover one of the items.");
    });
});