JSFiddle - React, Tailwind, and code Playground

by djquery

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css">
<script src="https://github.com/jquery/jquery-ui/raw/master/ui/jquery.ui.tooltip.js"></script>
<link rel="stylesheet" href="https://github.com/jquery/jquery-ui/raw/master/themes/base/jquery.ui.tooltip.css">
<form>
    <p>
        <label for="foo">Foo Label</label>
        <input type="checkbox" id="foo" />
    </p>
    <p>
        <label for="bar">Bar Label</label>
        <input type="checkbox" id="bar" title=""/><!-- THIS TITLE ATTR SHOULD NOT BE REQUIRED -->
    </p>
</form>

JavaScript

$( 'input' ).tooltip( {
    items: "[id]",
    content: function()
    {
        console.log( 'in content func' );
        return $( 'label[for="' + $( this ).attr( 'id' ) + '"]' ).html();
    }
} );

$('label').tooltip({
    items: '[for]',
    content: function(){ $(this).html();},
    position: function(){
       var x = {
            my: "left center",
            at: "right center",
            offset: "15 0",
            of: null
        };
        x.of = '#' + $(this).attr('for');
        return x;
    }
});