CODEWITHSUNDEEP
javascriptjqueryjquery-ui
IggY
IggY

Reputation: 3125

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

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/

Upvotes: 0

Views: 617

Answers (3)

alexan
alexan

Reputation: 371

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

Upvotes: 1

Abhishek
Abhishek

Reputation: 462

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...

Upvotes: 2

piscator
piscator

Reputation: 8709

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>

Upvotes: 1

Related Questions