英文:
How to position an element so that it is centered under its previous sibling
问题
.tooltip-container {
position: relative;
display: inline-block;
}
.tooltip {
position: absolute;
z-index: 1;
background-color: #555;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 0.5em;
}
.tooltip:before {
content: '';
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 10px;
height: 10px;
background-color: #555;
z-index: -1;
}
英文:
I want to center a speech bubble-esque tooltip element under a link. Here is my current code to do so:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.tooltip-container {
position: relative;
display: inline-block;
}
.tooltip {
position: absolute;
z-index: 1;
background-color: #555;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 0.5em;
}
.tooltip:before {
content: '';
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 10px;
height: 10px;
background-color: #555;
z-index: -1;
}
<!-- language: lang-html -->
Up ahead is a
<a href="#">
Button text
</a>
<div class="tooltip-container">
<div class="tooltip">
Tooltip explanation of button
</div>
</div>
<!-- end snippet -->
It looks like this
But I would like it to look like this
The only reason I made the .tooltip-container
div is to have a positioned ancestor for .tooltip
so that .tooltip
can be position: absolute
, but despite having that "anchor" in the page I can't figure out a way to center the second child inside of the first one. My ideal HTML would only be:
<a href="#">
Button text
</a>
<div class="tooltip">
Tooltip explanation of button
</div>
and I only want to apply styling rules to these two elements, not their parent. How can I achieve this?
答案1
得分: 3
只需将 a
移至 .tooltip-container
。
英文:
Just move a
to .tooltip-container
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.tooltip-container {
position: relative;
display: inline-block;
}
.tooltip {
position: absolute;
z-index: 1;
background-color: #555;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 0.5em;
}
.tooltip:before {
content: '';
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 10px;
height: 10px;
background-color: #555;
z-index: -1;
}
<!-- language: lang-html -->
Up ahead is a
<div class="tooltip-container">
<a href="#">
Button text
</a>
<div class="tooltip">
Tooltip explanation of button
</div>
</div>
<!-- end snippet -->
答案2
得分: 2
在遥远的未来,你可以使用新的锚点定位:https://drafts.csswg.org/css-anchor-position-1/#anchoring
实际上目前没有浏览器支持,但我为未来留下了答案。
.tooltip {
position: absolute;
bottom: anchor(--my-anchor 100%);
left: anchor(--my-anchor 50%);
transform: translate(-50%,120%);
z-index: 1;
border: 6px solid #0000;
background:
linear-gradient(#555 0 0) padding-box,
conic-gradient(from 135deg at top,#555 90deg,#0000 0) top/100% 50% no-repeat border-box;
color: #fff;
padding: 4px 8px;
border-radius: 12px;
white-space: nowrap;
margin-top: 0.5em;
}
#my-anchor {
anchor-name: --my-anchor;
}
直到那时,你可以将工具提示放在链接内部。
.tooltip {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%);
z-index: 1;
border: 6px solid #0000;
background:
linear-gradient(#555 0 0) padding-box,
conic-gradient(from 135deg at top,#555 90deg,#0000 0) top/100% 50% no-repeat border-box;
color: #fff;
padding: 4px 8px;
border-radius: 12px;
white-space: nowrap;
margin-top: 0.5em;
}
a {
position: relative;
}
Up ahead is a
<a href="#">
Button text
<div class="tooltip">
Tooltip explanation of button
</div>
</a>
英文:
In a far future you can use the new anchor positioning : https://drafts.csswg.org/css-anchor-position-1/#anchoring
No browser support for this actually but I leave the answer for the future
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-css -->
.tooltip {
position: absolute;
bottom: anchor(--my-anchor 100%);
left: anchor(--my-anchor 50%);
transform: translate(-50%,120%);
z-index: 1;
border: 6px solid #0000;
background:
linear-gradient(#555 0 0) padding-box,
conic-gradient(from 135deg at top,#555 90deg,#0000 0) top/100% 50% no-repeat border-box;
color: #fff;
padding: 4px 8px;
border-radius: 12px;
white-space: nowrap;
margin-top: 0.5em;
}
#my-anchor {
anchor-name: --my-anchor;
}
<!-- language: lang-html -->
Up ahead is a
<a href="#" id="my-anchor">
Button text
</a>
<div class="tooltip" anchor="my-anchor">
Tooltip explanation of button
</div>
<!-- end snippet -->
Until then, you can put the tooltip inside the link
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.tooltip {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%);
z-index: 1;
border: 6px solid #0000;
background:
linear-gradient(#555 0 0) padding-box,
conic-gradient(from 135deg at top,#555 90deg,#0000 0) top/100% 50% no-repeat border-box;
color: #fff;
padding: 4px 8px;
border-radius: 12px;
white-space: nowrap;
margin-top: 0.5em;
}
a {
position: relative;
}
<!-- language: lang-html -->
Up ahead is a
<a href="#">
Button text
<div class="tooltip">
Tooltip explanation of button
</div>
</a>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论