CSS定位輔助提示圖標

Question

早安，

我有這行代碼：

<div class="navigation"> 
<a href="~/Uploads/TimeSlotTemplate.xlsx" download>Download Upload Template</a> <div class="help-tip"> <p>This is the inline help tip! You can explain to your users what this section of your web app is about.</p></div> 
<a href="~/Uploads/TimeSlotTemplate.xlsx" download>Download Upload Template</a> <div class="help-tip"> <p>This is the inline help tip! You can explain to your users what this section of your web app is about.</p></div></div> 

我所試圖做的是有幫助尖DIV去旁邊的鏈接。當您將鼠標放在幫助提示div上時，該段會出現。我正在尋找讓段落直接位於幫助提示圖標下方，以避免疊加樣式。當我刪除這兩個元素的絕對位置時，圖標會右移到圖標旁邊，而段落位於圖標下方，但會創建大量空間。

這裏是我的CSS

.help-tip{ 
    position: absolute; 
    top: 18px; 
    right: 18px; 
    text-align: center; 
    background-color: #BCDBEA; 
    border-radius: 50%; 
    width: 24px; 
    height: 24px; 
    font-size: 14px; 
    line-height: 26px; 
    cursor: default; 
} 

.help-tip:before{ 
    content:'?'; 
    font-weight: bold; 
    color:#fff; 
} 

.help-tip:hover p{ 
    display:block; 
    transform-origin: 100% 0%; 

    -webkit-animation: fadeIn 0.3s ease-in-out; 
    animation: fadeIn 0.3s ease-in-out; 

} 

.help-tip p{ /* The tooltip */ 
    display: none; 
    text-align: left; 
    background-color: #1E2021; 
    padding: 20px; 
    width: 300px; 
    position: absolute; 
    border-radius: 3px; 
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); 
    right: -4px; 
    color: #FFF; 
    font-size: 13px; 
    line-height: 1.4; 
} 

.help-tip p:before{ /* The pointer of the tooltip */ 
    position: absolute; 
    content: ''; 
    width:0; 
    height: 0; 
    border:6px solid transparent; 
    border-bottom-color:#1E2021; 
    right:10px; 
    top:-12px; 
} 

.help-tip p:after{ /* Prevents the tooltip from being hidden */ 
    width:100%; 
    height:40px; 
    content:''; 
    position: absolute; 
    top:-40px; 
    left:0; 
} 

/* CSS animation */ 

@-webkit-keyframes fadeIn { 
    0% { 
     opacity:0; 
     transform: scale(0.6); 
    } 

    100% { 
     opacity:100%; 
     transform: scale(1); 
    } 
} 

@keyframes fadeIn { 
    0% { opacity:0; } 
    100% { opacity:100%; } 
} 

，這裏是一個jfiddle

https://jsfiddle.net/13275tvz/1/

Answer 1

需要一些HTML和CSS修復

當你可以將這個元素位置絕對，確保它的父母具有職位相對財產。

HTML

<div class="navigation"> 
<div class="link-container"> 
<a href="~/Uploads/TimeSlotTemplate.xlsx" download>Download Upload Template</a> <div class="help-tip"> <p>This is the inline help tip! You can explain to your users what this section of your web app is about.</p></div> 
</div> 

<div class="link-container"> 

<a href="~/Uploads/TimeSlotTemplate.xlsx" download>Download Upload Template</a> <div class="help-tip"> <p>This is the inline help tip! You can explain to your users what this section of your web app is about.</p></div></div> 
</div> 

CSS

.help-tip{ 
    position: absolute; 
    top: 18px; 
    right: 18px; 
    text-align: center; 
    background-color: #BCDBEA; 
    border-radius: 50%; 
    width: 24px; 
    height: 24px; 
    font-size: 14px; 
    line-height: 26px; 
    cursor: default; 
} 
.link-container{ 
    position:relative; 
    display:inline-block; 
} 
.help-tip:before{ 
    content:'?'; 
    font-weight: bold; 
    color:#fff; 
} 

.help-tip:hover p{ 
    display:block; 
    transform-origin: 100% 0%; 

    -webkit-animation: fadeIn 0.3s ease-in-out; 
    animation: fadeIn 0.3s ease-in-out; 

} 

.help-tip p{ /* The tooltip */ 
    display: none; 
    text-align: left; 
    background-color: #1E2021; 
    padding: 20px; 
    width: 300px; 
    position: absolute; 
    border-radius: 3px; 
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); 
    right: -4px; 
    color: #FFF; 
    font-size: 13px; 
    line-height: 1.4; 
} 

.help-tip p:before{ /* The pointer of the tooltip */ 
    position: absolute; 
    content: ''; 
    width:0; 
    height: 0; 
    border:6px solid transparent; 
    border-bottom-color:#1E2021; 
    right:10px; 
    top:-12px; 
} 

.help-tip p:after{ /* Prevents the tooltip from being hidden */ 
    width:100%; 
    height:40px; 
    content:''; 
    position: absolute; 
    top:-40px; 
    left:0; 
} 

/* CSS animation */ 

@-webkit-keyframes fadeIn { 
    0% { 
     opacity:0; 
     transform: scale(0.6); 
    } 

    100% { 
     opacity:100%; 
     transform: scale(1); 
    } 
} 

@keyframes fadeIn { 
    0% { opacity:0; } 
    100% { opacity:100%; } 
} 

樣式因此..

Link for reference

希望這有助於..

Answer 2

你需要Ç將相對位置改爲相對，顯示爲內嵌塊，然後解除頂部，右邊。

.help-tip { 
    position: relative; 
    /* top: 18px; */ 
    /* right: 18px; */ 
    text-align: center; 
    background-color: #BCDBEA; 
    border-radius: 50%; 
    width: 24px; 
    height: 24px; 
    font-size: 14px; 
    line-height: 26px; 
    cursor: default; 
    display: inline-block; 
}