'how show the title value for an input when it gets the focus

If I have

<input type="text"
       name="name"
       id="name" 
       placeholder="your name" 
       title="only words" 
       value=""/>

If the user puts/moves the cursor over the textfield without do click then the title's message appears. (It is expected). The problem is, is needed wait 1 or 2 seconds to see that message.

Therefore: I want show that message when the user gives the focus in the textfield too. Activate the event.

I have the following:

$("form#idform input[type=text]").focus(function() {
    //what to do?
});

$("form#idform input[type=text]").blur(function() {
    //what to do?
});

What code should go in what to do? respectively for each event?.

Thanks

javascriptjqueryhtml


Solution 1:[1]

You can use qtip2.

Inlcude:

http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.js

http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.css

Text Field:

<input type="text" title="My tooltip text1" />

Tooltip Initialize:

// Create the tooltips only when document ready
$(document).ready(function () {
    $('input[title]').qtip();    
});

Fiddle

For the audience, the following is the expected requirement, it is a complement from above:

$('input[title]').qtip({
    content: $(':focus').prop('title'),
    show: 'focus',
    hide: 'blur'
});

Solution 2:[2]

title -> tooltip will appear when mouse over. Yo can acces thi attribute in javascript:

$('input').focus(function(){
    var title = $(this).attr('title');
    console.log(title);
  });

But for your question, yes you must write your own tooltip.

Solution 3:[3]

$('input').focus(function(){
    var title = $(this).attr('title');
    console.log(title);
  });

code not work

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Manuel Jordan
Solution 2 Ihor Vahanov
Solution 3 zee it

Related Questions