我如何将工具提示置于图像上方？

我试图给我的图像添加一些工具提示，但没有找到任何方式将此工具提示置于图像上方。尝试了一些解决方案/想法与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

我如何将工具提示置于图像上方？

回答

相关问题