Textbox Icon Tooltip on mouseover [Solved]

[devnull]

Is it possible to add a tooltip mouseover to a textbox icon ?

Code:

    $('a.textbox-icon').tooltip({
      showEvent: 'hover',
      onShow:function(){
        alert('Hello World');
      }
    })

[jarry]

You can call 'getIcon' method to get an icon and create a tooltip on it.

Code:

$('#tt').textbox('getIcon',0).tooltip({
	content:'tooltip content'
})

[devnull]

Thanks very much, but I have a few problems in my implementation, not sure if you can help:

The main purpose of this is to use it for multiline-textbox where the space is limited and it is a readonly field, so the user will see the beginning of the text, but can mouseover so see the full text with carriage returns etc

http://jsfiddle.net/seKvb/35/'

1) The first time you mouseover, the tooltip is offset to the right
2) I cannot get the carriage returns to be converted to <br>
3) I want to prevent the tooltip from showing at all if value is null, now it shows for a second and then hides.
4) when using icon in multiline box, the gray textarea 'border' appears on the right of the textbox.

Code:

     $('input.valuetip').css('text-overflow','ellipsis').each(function(){
        $(this).textbox({icons:[{iconCls:'icon-info'}]}).textbox('getIcon',0).tooltip({
        onShow:function(e){
          var val = $($(this)[0]).closest('.textbox').prev('input').textbox('getValue').replace(/(\r\n|\n|\r)/g,"<br />");
          if(!val) $(this).tooltip('hide');
          else $(this).tooltip('update','<span class="vtip">'+val+'</span>');
        }
        });
      })

[jarry]

Please try this updated example http://jsfiddle.net/seKvb/38/

[devnull]

Hi;

Thanks, that is an improvement, however it only appears to work if the value is set when the element is created.

See this update, where the second input is updated after, the tooltip does not get the input value.

http://jsfiddle.net/seKvb/39/

[jarry]

Please try this example http://jsfiddle.net/seKvb/40/ again.

[devnull]

Thanks very much, I added back the multiline code:

http://jsfiddle.net/seKvb/41/