Tool tip positioning on different screen resolutions

Hello, I have an image inside a table and Im trying to place a few tool tips on like a map. I got it to work but when i looked on another computer the tooltips moved off screen. I tried all positions ex: Absolute, in my tooltip but nothing worked. I need the tool tips to stay in position of the image no matter what the screen size below is the css and html

.myTable {float: left;margin: 0 0; background-color: transparent; border-collapse:collapse;width:100%;  }
.myTable th {background-image: url("http://wiki/GetFile.aspx?File=/Images/html/Dark%20wood%20grain.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    padding: 5px; 
    border:4px solid #491e0e;
    width: 100%; }
.myTable td,.myTable th  { vertical-align: top;border: 1px solid black; width: 100%;}
img {background-color: transparent; 
    display:block;
    max-width:100%;
    height:auto;
} 
a.tooltip2 {position:/*Tried different positions here*/; display:block; outline:none; margin: -360px 630px }
a.tooltip2 strong {line-height:30px;}
a.tooltip2:hover {text-decoration:none;} 
a.tooltip2 span {
    z-index:10;display:none; padding:14px 20px;
    margin-top: 10px; margin-left:-95px;
    width:300px; line-height:16px;
}
a.tooltip2:hover span{
    display:inline; position:absolute; 
    border:2px solid #FFF;  color:#eee;
    }
.callout2 {z-index:20;position:absolute;border:0;top:-14px;left:100px;}
a.tooltip2 span
{
    border-radius:2px;        
    box-shadow: 0px 0px 8px 4px #666;
   }
<table class="myTable">
<img src="http://wiki/GetFile.aspx?File=/Images/Locations/MPC-building%203d.png"/>
<a href="#" class="tooltip2">
    <img src="http://wiki/Thumb.aspx?File=/Images/jiffy%20buttons/map%20marker.png&Size=imgeditprev&Width=50&Height=68&Page=" />
    <span>
        <img class="callout2" src="http://wiki/GetFile.aspx?File=/images/tooltip.gif" />
        <img src="" style="float:right;" />
        <strong>Main Office</strong>
    </span>
</a>
</table>`

I cant figure out how to post the html lol

Hi @509designcompany. Just copy and paste your code. Then highlight it and select the </> icon to format the code, or after pasting the code you can put three backticks (`) on the line before the code and three backticks on the line after the code.

1 Like

Sweet thanks!!!

Hi, @509designcompany, welcome to the forums!

Could you post a screenshot of this when it works on your machine?

Or maybe (and) just give us the dimensions of the three images in the code.

It would help debugging it. :slight_smile:

1 Like

also the dimensions of the building change to fit the screen size

Anyone got anything? ill try anything once :wink:

I think the solution here could be setting absolute position coordinates in percentages with CSS (top and left) for your markers. Your container holding the markers will always have to be the exact size as the image and positioned in the same place. So you could have a div container wrapping the image and all your markers absolutely positioned within

2 Likes

Maybe something like this (although it drifts a little).

3 Likes

not sure what im doing wrong but now when i do absolute positioning it scrolls with the page and does not stay put on the image

i took out all other elements and css, and started over, put it all inside a div class container, and took it out of the table absolute positioning seams to be working now, seams to me that it had something to do with the Table elements Thanks everyone!!!

You guys an Gals are awesome btw!!! that helped so much!

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.