Question

I have a star icon on a page. If the user is not logged in, I’m displaying another image which says “Please sign in”. The problem I’m having is this image get’s displayed in the next line all the way to left. I need to show it right below the star icon. I’m trying to find the position of the star icon, then adjust the top and bottom values and have the “Please sign in” image show right below it.

<asp:Image ID="imgFavorite" runat="server" ImageAlign="AbsMiddle" />
<div id="toolTipDivTitle" class="tooltip"></div>

And my javascript –

 function showSignInPromptForTitle() {
    var toolTipDivTitle = $("#toolTipDivTitle");
    toolTipDivTitle.css('background', 'url(/SiteCollectionImages/CF_HoverOver.png) no-repeat');
    toolTipDivTitle.css('color', 'white');
    toolTipDivTitle.css('width', '160px');
    toolTipDivTitle.css('height', '83px');
    toolTipDivTitle.css('padding', '30px 5px 0px 20px');
    toolTipDivTitle.css('z-index', '9999');
    toolTipDivTitle.css('display', 'none');
    toolTipDivTitle.css('position', 'absolute');
    toolTipDivTitle.css('font-size', '11px');
    toolTipDivTitle.text('Sign in to add to your favorites.');
    toolTipDivTitle.show();

Any help is appreciated. Thanks!

Update: Here’s the fiddle link – http://jsfiddle.net/eqACv/2/

Answer 1

Here is a fiddle with what you want :

http://jsfiddle.net/eqACv/8/

For an even greater effect you should add (‘blind’,500) as parameters for the functions hide and show.(Requires jQuery UI)