Home/ Questions/Q 7065235
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T04:55:54+00:00

This is my first post here after many visits. Hello! I am trying to

  • 0

This is my first post here after many visits. Hello!

I am trying to make pop-up annotations on an image. I am using the CSS dropdown menu behavior to do this. You can see my example here

When you hover over the tip icon on the left, the container expands to reveal the text. But for the tip icon on the right, the text box extends outside of the image boundary.

How do I make the text box appear to the left of the icon so it stays within the image?
I used margin-left with a negative value but it also moves the tip icon.

Here is my code:

test

</head>
<body>

<style type="text/css"> 

.container {
z-index: 1000;
width: 15px;
height: 18px;
overflow: hidden;
position: absolute;
}
.container:hover {
width: 200px;
height: auto;
}

.copy {
font-size: 12px;
font-family: Helvetica, Verdana, Arial, sans-serif;
padding: 5px;
background-color: #ffcc99;
}

#painting {
margin: 0;
padding: 0;
width: 750px;
height: 530px;
background: url(painting.jpg) top left no-repeat #ffffff;
}

#tip1 {
left: 185px;
top: 60px;
}

#tip2 {
left: 698px;
top: 290px;
}

</style>


<div id="tip1" class="container">
    <div class="icon">
        <img src="tip_icon.png">
    </div>

    <div class="copy">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras libero ante, faucibus ac dictum eget, mollis ac erat. In porta velit vitae arcu vehicula ornare lacinia turpis accumsan. Quisque nec ligula non ligula elementum ultrices. Suspendisse commodo suscipit dapibus.</p>
    </div>
</div>

<div id="tip2" class="container">
    <div class="icon">
        <img src="tip_icon.png">
    </div>

    <div class="copy">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras libero ante, faucibus ac dictum eget, mollis ac erat. In porta velit vitae arcu vehicula ornare lacinia turpis accumsan. Quisque nec ligula non ligula elementum ultrices. Suspendisse commodo suscipit dapibus.</p>
    </div>
</div>

<div id="painting">
    </div>

</body>

I am still learning CSS so I appreciate any help

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is my solution to this problem: http://jsfiddle.net/CwgDQ/1/
    Instead of overflowing the content of the container hide it by default and show on :hover.
    Add position:absolute to .copy and #tip2 .copy { ...; right:0 } should do the trick.

    EDIT (copy of CSS)

    .container {
    z-index: 1000;
    position: absolute;
}

.container:hover {
    height: auto;
}

.container .copy {
    display:none;
}

.container:hover .copy {
    display:block;
    width: 200px;
}

.copy {
    font-size: 12px;
    font-family: Helvetica, Verdana, Arial, sans-serif;
    padding: 5px;
    background-color: #ffcc99;
    position:absolute;
}

#painting {
    margin: 0;
    padding: 0;
    width: 750px;
    height: 530px;
    background: url(http://www.troyoxford.com/paint/painting.jpg) top left no-repeat #ffffff;
}

#tip1 {
    left: 185px;
    top: 60px;
}

#tip2 {
    left: 698px;
    top: 290px;
}

#tip2 .copy {
    right:0
}
    • 0