Display tooltip when container overflow is hidden
<p>Is there a way, preferably without js, to position and display a tooltip above a container, when the container must have <code>overflow:hidden</code>, without the tooltip be affected and clipped by the container?</p>

<p>Here is an example to illustrate this problem:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  
  &lt;a class="tooltips" href="#"&gt;Hover me for Tooltip
      &lt;span&gt;Tooltip&lt;/span&gt;&lt;/a&gt;
  &lt;div&gt;
    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.
    &lt;/div&gt;
  &lt;div&gt;</code></pre>
</div>
</div>
</p>