asked on

My tooltip is not displaying correct

Hi,

I need your help please.

my tooltip left column is off can you please help me with this.

I'm using IE 11

/* Tooltip start  */
  
 a.tooltip {outline:none; color:#7a7a7b;}
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;} 
a.tooltip span {
    z-index:10;display:none; padding:14px 20px;
    margin-top:-30px; margin-left:28px;
    width:300px; line-height:16px;
}
a.tooltip:hover span{
    display:inline; position:absolute; color:#a51d43;
    border:1px solid #DCA; background:#fffAF0;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
    

a.tooltip span
{
    border-radius:4px;
    box-shadow: 5px 5px 8px #CCC;
} 
/*    End Tooltip   */

Open in new window

 <td align="left" valign="bottom" style="padding-right:5px;" scope="col">

                   <a href="#" class="tooltip">
   New Rule Criteria: 
    <span>
        <img class="callout" src="../images/callout.gif" />
        What Triggers the rule?
    </span>
</a>        

                        </td>

Open in new window

ToolTip.png

HainKurt

please copy this image to public so we can have access to it

i created a fiddle to test
https://jsfiddle.net/ca2b2jme/

and this with a nice image
https://jsfiddle.net/ugtoth85/

lulu50

ASKER

Attached is the image I'm still having the same issue
callout.gif

HainKurt

check this fiddle to see if this is what you want

https://jsfiddle.net/mzro8ts7/

lulu50

ASKER

oh no Huseyin!!!!

you are so good

Can you please tell me what I was doing wrong?

Can you have the pointer a little bit down, it too high from the text right now

Thanks,
Lulu

HainKurt

check css I just moved ıt 20 px up

.callout {
z-index: 20;
position: absolute;
top: 10px;
border: 0;
left: -12px;
}

ASKER CERTIFIED SOLUTION

HainKurt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

lulu50

ASKER

How can I change the position to move a little bit down?

HainKurt

see my previous post, ID: 42147350

lulu50

ASKER

Yes

I got it now!!!!!

Huseyin you are the best !!!!! of the best !!!!!

Thank you and one more Thank you

it is working great!!!!

and maybe one more Thank you lol lol

Thanks,
Lulu

lulu50

ASKER

Thank you A+++++++++++

HainKurt