html溢出自动隐藏命令,html – 隐藏容器溢出时显示工具提示

当容器必须有溢出：隐藏时,是否有一种方法,最好没有js,在容器上方定位和显示工具提示,而不会影响工具提示并被容器夹住？

这是一个例子来说明这个问题：

.container {

overflow: hidden;

position: relative;

margin: auto;

width: 50%;

border: 3px solid green;

padding: 10px;

height: 70px;

background: lightblue;

text-align: center;

}

a.tooltips {

position: relative;

display: inline;

}

a.tooltips span {

position: absolute;

width: 140px;

color: #FFFFFF;

background: #000000;

height: 96px;

line-height: 96px;

text-align: center;

visibility: hidden;

border-radius: 8px;

Box-shadow: 4px 3px 10px #800000;

}

a.tooltips span:after {

content: '';

position: absolute;

bottom: 100%;

left: 50%;

margin-left: -8px;

width: 0;

height: 0;

border-bottom: 8px solid #000000;

border-right: 8px solid transparent;

border-left: 8px solid transparent;

}

a:hover.tooltips span {

visibility: visible;

opacity: 0.7;

top: 30px;

left: 50%;

margin-left: -76px;

z-index: 999;

}

Hover me for Tooltip

Tooltip

Lorem ipsum dolor sit amet,consectetur adipiscing elit. Proin porttitor elit neque,in condimentum ante pulvinar et. Donec et erat nulla. Vestibulum quis porta tellus. Curabitur non blandit metus. Vestibulum nec nisi quis urna tempor pharetra. Phasellus volutpat,arcu ac malesuada porttitor,erat diam facilisis ligula,eget aliquet nibh augue.