CODEWITHSUNDEEP
javascriptjquerytooltip
Erik-Jan Riemers
Erik-Jan Riemers

Reputation: 1392

Using input titles as text for a div via jquery

html:

<div id='wrapper'>
<div id='settings'>Settings'</div>
<div id='menu'>
   Jobname <input type=text id='tipjob' title='this text should go into the tooltip' length='20'>
   Appname <input type=text id='tipapp' title='this text should as app text in the tooltip' length='20'>
</div>            
  <div id="build">Builds
      <div id="build-log">Build Log</div>
  </div>
  <div id="content">Content
      <div id="tooltips">Tooltip</div>
  </div>
<div id='footer'>Footer</div>
</div>

javascript:

$(document).ready(function(){
$('#tipjob').bind('mouseenter', function() {
    $('#tooltips').fadeIn();
});
$('#tipjob').bind('mouseleave', function() {
    $('#tooltips').fadeOut();
});
});

see css on jsfiddle too.

http://jsfiddle.net/yZZDd/433/

In above example (non working) i want to be able to fadein/fadeout some text when a person hovers over the input field. The text should go into the div "tooltips" which is hidden in css now (might not be the best way perhaps)

I dont need any other tooltip library's other then the default jquery (since i dont see the need for it, regarding tooltips)

So i am assuming i use the mouseenter/mouseleave per input field, then set a fadein fadeout but i dont know how to put the text from the input fields in there somehow.

Since i started with 1 input field i could just show and hide the div, but that became a problem with the second input field :)

Hope i explained it correctly. First timer here.

Upvotes: 1

Views: 104

Answers (2)

Jai
Jai

Reputation: 74738

See this one: http://jsfiddle.net/yZZDd/448/

instead using id use class

$(document).ready(function(){
   $('.tipjob').bind('mouseenter', function() {
      $('#tooltips').text('').text($(this).attr('title')).stop().fadeIn();
   });
   $('.tipjob').bind('mouseleave', function() {
      $('#tooltips').stop().fadeOut();
   });
});

Upvotes: 0

Zoltan Toth
Zoltan Toth

Reputation: 47667

Try this - DEMO

$(document).ready(function(){
    $('input').on({
        mouseenter: function() {
            $('#tooltips').text( $(this).prop("title") ).stop(1, 1).fadeIn();
        },
        mouseleave: function() {
            $('#tooltips').fadeOut();
        }
    });
});

Upvotes: 1

Related Questions