How can I make a hover box appear over my image?

Question

I have the following which is not a link. the class ui-icon gives a background image 16px square for my span.

With jQuery or otherwise, is it possible to make bubble text appear when a user hovers over the image inside the span? I don't really want to use a toolbar tip for this as it might be overkill. Just a normal bubble text from the browser that would appear if it was a link.

<div>
    <input name="Password" type="password">
    <span style="position:relative; display: inline-block, top: 3px;" class="ui-icon"></span>
</div>

Just to add a bit more information. I already use jQuery like this to add the styles to the span.

            container
            .addClass("ui-icon")
            .addClass("ui-icon-alert")
            .css("position","relative")
            .css("display","inline-block")
            .css("top","3px");

Answer 1

只需为span元素添加title 。

<span title="Your tip" style="position:relative; display: inline-block, top: 3px;" class="ui-icon"></span>