asked on

CSS measurement

Please verifty whether my understanding of the following is correct or not ?

As "tooltiptext" is placed under div "tooltip", does it mean
1. "Tooltip text" will positioned after "Hover over me"
2. Refer point for botoom:100% is based on the bottom of "Tooltip text" (see attachment)
3. Refer Point for "left:50%" is based on the centre point of "Hover over me"
4. Refer Point for "margin-left:-60px" is based on the centre point of "Hover over me" and shift 60px to the left.

Can I say in #3 & #4, the refer point is the centre point of "Hover over me" ?

Thx

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Open in new window

Margin.png

Julian Hansen

Positioning is relative to the parent.

Change style on <span> to

bottom: 0;
left: 0;
margin: 0;

Open in new window

and on container to

.tooltip {
	position: relative;
	display: inline-block;
	border: 1px solid blue;
}

Open in new window

You see this

This shows that the hover box is aligned with the bottom left corner of the container div which (because of its display: inline-block) style is only as wide as the text it holds.

Julian Hansen

3 Refer Point for "left:50%" is based on the centre point of "Hover over me"
Reference point is the left edge of the container left:50% is the mid point of the container

4. Refer Point for "margin-left:-60px" is based on the centre point of "Hover over me" and shift 60px to the left'
Reference is relative to the tooltip (width 120) margin-left: -60px OR left: -60px; shifts the tooltip half the ToolTips width to the left.

So in essence what the above is saying is that the tooltip will be centered above the hover link - providing the tooltip stays width 120px

AXISHK

ASKER

Thx.

To test my understanding, since there is no positioning for class "tooltip". It will simply follow the body style to center the hover text and appear as same line as container text. Hover text refers body default positioning (bottom 0, left 0 , margin 0), correct ?

Thx

Julian Hansen

I am not quite following you

To test my understanding, since there is no positioning for class "tooltip"

class is positioned relative - which means all absolute positions of children are relative to this container

It will simply follow the body style to center the hover text and appear as same line as container text

Not sure what you are saying here

Hover text refers body default positioning (bottom 0, left 0 , margin 0), correct ?

However text is relative to parent container <div class="tooltip"> not body

AXISHK

ASKER

One more check, for the container, are we talking about "<div class="tooltip">" ? Or "body" container ?

Thx again.

Julian Hansen

The container is the immediate parent

so

<div class="tooltip">
   <p>Container for this element is .tooltip <span>but for this it is the p</span>
    </p>
</div>

Open in new window

AXISHK

ASKER

Thx.

<body> is configured with "text-align:center". Does it mean all elements (<tooltip> & <tooltiptexte>) inside it will also inheritance with this property ?

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

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

Start Free Trial

AXISHK

ASKER

Thx

Julian Hansen

You are welcome.