Search code examples
imageinputtooltipshowtitle

Position to the Right (of text box) an Image tha't s in Title of Input Text Box

I check some questions related to this positioning but none work for the image that i got within the Title in the input box.

I've got a few input boxes, each one has a title, that give some extra help to the users of what they should type in, as an illustrative example i added an image within the title of the input box, that shows up with the Jquery Tooltip.

jquery tooltip code:

$(function() {
$( document ).tooltip({
  items: "[title]",
  content: function() {
    var element = $( this );

    if ( element.is( "[title]" ) ) {
      return element.attr( "title" );
    }

  }
});

Thing is I would like for the tooltip (image or text in it) to show to the right of the input box. as in example in link below

this is the code to get this result: (works for TEXT but not for IMG) it displays img as text rather than with an image. http://jqueryui.com/tooltip/#forms

This fiddle for example: http://jsfiddle.net/8ejaeyL4/

any suggestion will be appreciated.

thanks

Solution

  • I found a solution. Rather than getting the image loaded from the title, used tooltip contect option and then used the #forms code to get it to locate where i need.

    <label for="trial"> Trial1 input type"text" id="test1" href="#" title="test1" >

    this is the jquery

    `$(document).ready(function() {
    $( "#test1" ).tooltip({ 
    content: '<img src="images/prdnumber.jpg"/>' });



$( "[title]" ).tooltip({ position: {my: "left top", at: "right+5 top-5"}});

    works