JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/ui-lightness/jquery-ui.css">
<div id='homelink1'>homelink one</div>
<div id='homelink2'>homelink two</div>

<div id='poptext1' style='display:none'>poptext one</div>
<div id='poptext2' style='display:none'>poptexttwo</div>

CSS

#target {
    width: 300px;
    height: 300px;
    background: #EEE;
    border: 2px dashed orange;
}
#pointer {
    height: 0;
    width: 100px;
    line-height: 40px;
    text-align: center;
    padding: 0 10px;
    color: white;
    background: #777;
    border: 2px solid #333;
    display: none;
    position: absolute;
    z-index: 10;
    clip:auto;
    overflow:hidden;
}

JavaScript

$("[id^=homelink]").each( function() {
    $(this).hover( setUpHover(this.id.match(/\d+$/)[0]) );
});

function setUpHover(num) {
    return function() {
        $("#poptext" + num).toggle(); 
    };
}