我如何將工具提示置於圖像上方？

我試圖給我的圖像添加一些工具提示，但沒有找到任何方式將此工具提示置於圖像上方。嘗試了一些解決方案/想法與left: -50%;但這不會工作。問題是，工具提示本身有一個動態的寬度/高度。我如何將工具提示置於圖像上方？

的代碼（https://jsfiddle.net/bwank6hz/）：

div#garden_left { 
 
    font-size: 0.7em; 
 
    font-family: Verdana; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
h5 { 
 
    color: black; 
 
    font-size: 1.2em; 
 
    font-weight: bold; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
figure { 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-margin-before: 0; 
 
    -webkit-margin-after: 0; 
 
    -webkit-margin-start: 0; 
 
    -webkit-margin-end: 0; 
 
} 
 
figure#lawn_mower { 
 
    bottom: 0; 
 
    position: absolute; 
 
    right: 50%; 
 
} 
 
figure#lawn_mower img { 
 
    height: auto; 
 
    width: 50%; 
 
} 
 
figcaption { 
 
    background: lightgray; 
 
    border: 1px solid dimgray; 
 
    border-radius: 0.2vw; 
 
    bottom: 120%; 
 
    font-size: 1.1em; 
 
    height: auto; 
 
    margin: 0; 
 
    opacity: 0; 
 
    padding: 0.2vw 0.6vw; 
 
    position: absolute; 
 
    visibility: hidden; 
 
    white-space: nowrap; 
 
    width: auto; 
 
    z-index: 1; 
 
} 
 
figcaption::after { 
 
    border-color: black transparent transparent transparent; 
 
    border-style: solid; 
 
    border-width: 8px; 
 
    content: ""; 
 
    left: 50%; 
 
    margin-left: -8px; 
 
    position: absolute; 
 
    top: 100%; 
 
} 
 
figure:hover figcaption { 
 
    opacity: 1; 
 
    visibility: visible; 
 
}

<div id="garden_left"> 
 
    <figure id="lawn_mower"> 
 
    <img src="http://www.kunkel-dienstleistungen.com/dev/img/lawn_mower.png" alt="lawn mower"> 
 
    <figcaption> 
 
     <h5>Headline</h5> 
 
     Description with some text 
 
    </figcaption> 
 
    </figure> 
 
</div>

來源

2016-04-14 am1

https：//開頭的jsfiddle .net/eybe42m3/ 增加'display：block; 保證金：0汽車;'到'圖＃lawn_mower img' –

要完美中心不知道元件的寬度，最好是absolute + translate：

figure { 
    position: relative; 
} 
figcaption { 
    position: absolute; 
    left: 50%; 
    -webkit-transform: translateX(-50%); /* Safari iOS */ 
    transform: translateX(-50%); 
}

看到它工作：

https://jsfiddle.net/bwank6hz/3/

來源

2016-04-14 12:02:23

謝謝 - 這對我工作！ :) – am1

只text-align:center;在<figure>使用將解決這裏

figure { 
    margin: 0; 
    padding: 0; 
    text-align:center; 
    -webkit-margin-before: 0; 
    -webkit-margin-after: 0; 
    -webkit-margin-start: 0; 
    -webkit-margin-end: 0; 
}

問題沒有必要用左對齊和變換屬性

例子：https://jsfiddle.net/bwank6hz/4/

來源

2016-04-14 12:10:13

我如何將工具提示置於圖像上方？

回答

相關問題