not able to show tool tip items for image button when we are hovering

Question

I am trying to do two things at one time when i hover the image button, I need to show another image and i need to show tool tip as well

I am successfully achieved first one (ie) showing another image when i do hovering on the image button, but not able to show the tool tip for that image button. and this is my jquery code...

BUTTON :1 (Search Button)

 $(function () {
    $("#Search").mouseover(function () {
        var hoverimg = $(this).attr("src").match(/[^\.]+/) + "_hover.png";
        var orgimg = $(this).attr("src");
        $(this).attr("src", hoverimg);
        $(this).attr("title", orgimg);
    })
        .mouseout(function () {
            $(this).attr("src", $(this).attr("title"));
        });
});

Button 2 :Reset Button

$(function () {
    $("#Reset").mouseover(function () {
        var hoverimg = $(this).attr("src").match(/[^\.]+/) + "_Hover.png";
        var orgimg = $(this).attr("src");
        //var tarr = orgimg.split('/');      
        //var file = tarr[tarr.length - 1]; 
        //var data = file.split('.')[0];
        //alert(data);
        $(this).attr("src", hoverimg);
        $(this).attr("title", orgimg);
       // $(this).attr("title", data);

    })   
    .mouseout(function () {
         $(this).attr("src", $(this).attr("title"));
      });
});

for both image buttons i need to do same thing in second button if i execute the commented Out lines (i am getting tool tip item having the name (Reset) but when i mouse out from that button , i am losing the button image ...

For search button i need to show tool tip name like Search and for reset button i need to show the tooltip item like Reset

and this is the HTML mark up for those two buttons

      <div class="rstbtn">               
            <img src="~/Images/Reset.png" id="Reset" />

        </div>
        <div class="btn">               
             <img src="~/Images/Search.png" id="Search"  />
        </div>

would any one pls help on this , any suggestions and any ideas that would be very grateful to me ...

Many thanks in advance.....

Answer 1

Try this HTML for the purpose

var orgimg
var orgimg2
$(function () {
    $("#Search").mouseover(function () {
        var hoverimg = $(this).attr("src").match(/[^\.]+/) + "_hover.png";
        orgimg = $(this).attr("src");
        $(this).attr("src", hoverimg);

    })
    .mouseout(function () {
        $(this).attr("src", orgimg);
    });
});

$(function () {
    $("#Reset").mouseover(function () {
        var hoverimg = $(this).attr("src").match(/[^\.]+/) + "_Hover.png";
        orgimg2 = $(this).attr("src");
        //var tarr = orgimg.split('/');      
        //var file = tarr[tarr.length - 1]; 
        //var data = file.split('.')[0];
        //alert(data);
        $(this).attr("src", hoverimg);

       // $(this).attr("title", data);

    })   
.mouseout(function () {
     $(this).attr("src", orgimg2);
  });
});

HTML :

<div class="rstbtn">               
    <img src="~/Images/Reset.png" id="Reset" title="Reset" />
</div>
<div class="btn">               
    <img src="~/Images/Search.png" id="Search"  title="Search"/>
</div>

Thanks

Answer 2

For Search button

$(function () {
    var orgimg = $("#Search").attr("src");
    var tooltip = $("#Search").attr("id");
    $("#Search").mouseover(function () {
        var hoverimg = $(this).attr("src").match(/[^\.]+/) + "_hover.png";

        $(this).attr("src", hoverimg);
        $(this).attr("title", tooltip);
    })
        .mouseout(function () {
            $(this).attr("src", orgimg);
        });
});

Follow similar approach for Reset button. Since you don't have title in mark up I'm using id as the title (tooltip)

Fiddle