JqueryUI Tooltip : Show tooltip of div when focus on a field in another div

Question

I have a form with tooltips that appears when the mouse hover on the label. I'd like the same tooltip (same position, same text) to also appear on focus of the associated input field.

<div>
    <div title='hello world'>hello world</div>
    <div> <input name="test" /></div>
</div>

I don't want to add a title="..." in the <input> because in my real case scenario the tooltip are bigger and it would make the UI look messy, so I want to trigger the tooltip of the <div>hello world</div> on focus of the <div><input></div>

I created a dummy example here : http://jsfiddle.net/03nm70x4/

Answer 1

Updated Fiddle

$(document).ready(function() {
    $(document).tooltip({
        items: "input",
        content : $('div[title="this is the title of hello world"]').prop('title'),
    });
});

do let me know if it works...

Answer 2

Add the title to your parent div

<div title='this is the title of hello world'>
<label for="test" >hello world</label>
    <input id="test"  />
</div>

Answer 3

I hope you do not mind using a library to achieve that. Instead of independent/indie libraries, you can use jQueryUI's tooltip functionality.

jQueryUI Tooltip

<div>
    <div id="label" title='hello world'>hello world</div>
    <div> <input id="test-input" name="test" /></div>
</div>

$(function() {
    $( document ).tooltip();
});

$('#test-input').hover(function(){
    $( "#label" ).tooltip( "open" );
});