Print Page - Textbox Icon Tooltip on mouseover [Solved]

Title: Textbox Icon Tooltip on mouseover [Solved]
Post by: devnull on March 30, 2015, 06:11:05 AM

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

Code:

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

Title: Re: Textbox Icon Tooltip on mouseover
Post by: jarry on March 30, 2015, 09:15:05 AM

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

Code:

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

Title: Re: Textbox Icon Tooltip on mouseover
Post by: devnull on March 30, 2015, 07:07:49 PM

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

Title: Re: Textbox Icon Tooltip on mouseover
Post by: jarry on March 31, 2015, 05:31:17 PM

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

Title: Re: Textbox Icon Tooltip on mouseover
Post by: devnull on March 31, 2015, 06:01:46 PM

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/

Title: Re: Textbox Icon Tooltip on mouseover
Post by: jarry on March 31, 2015, 07:21:14 PM

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

Title: Re: Textbox Icon Tooltip on mouseover
Post by: devnull on March 31, 2015, 07:30:04 PM

Thanks very much, I added back the multiline code:

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

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: devnull on March 30, 2015, 06:11:05 AM