CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Gisinior
Gisinior

Reputation: 23

div-tooltip - same on stackoverflow

if i mouseover on my nick in stackoverflow on top page that show me new menu with * activity * privileges * logout etc. how can i make it? i maked something:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<style type="text/css">

#ONE {
    background-color: #888;
    width: 500px;
    height: 500px;
}
#TWO {
    background-color: blue;
    width: 50px;
    height: 50px;
}
#THREE {
    background-color: yellow;
    width: 200px;
    height: 200px;
    display: none;
}
#four {
    background-color: red;
    width: 200px;
    height: 200px;
}

</style>
<script type="text/javascript">

    $(document).ready(
    function()
    {
        $("#TWO").click(
        function()
        {
            $("#THREE").toggle();
        });
    });
</script>

<div id="ONE">
    <div id="TWO">
    </div>

    <div id="four">
    </div>

    <div id="THREE">
    </div>
</div>

sample image: http://img231.imageshack.us/img231/3885/threej.png

  1. default
  2. click for blue div
  3. how can i it make?

Upvotes: 0

Views: 324

Answers (2)

marramgrass
marramgrass

Reputation: 1411

If I understand correctly, you're asking how to make the yellow div appear up beside the blue one, as you have it in the third mockup? If that's the case, then:

You'll want to read up on CSS Positioning. In a nutshell, to make the yellow div sit over everything like that, it needs to take position: absolute; It'll be positioned in relation to it's nearest ancestor that has positioning, so set #ONE to position: relative;

So:

#ONE {
  position: relative;
}
#THREE {
  position: absolute;
  left: 100%;
  top: 25%;
}

This will make the top-left of #THREE shift to the far right of and a quarter of the way down #ONE. The absolute positioning also takes it out of the flow of the document, allowing it to overlap other elements.

Upvotes: 1

Niklas
Niklas

Reputation: 30012

If you want to position elements on top of each other, use position: relative or absolute. If you want it to stick to a position on your window regardless of if you scroll, use fixed.

After defining the position, you can define top, right, bottom and left to position it where you want. To simulate the 3rd image in your example, you could add:

position:relative;
top: -220px;
left:50px;

to your #THREE elements CSS, like here: http://jsfiddle.net/niklasvh/Axjgf/

Upvotes: 0

Related Questions