Anzeige tooltip, wenn der container overflow hidden

Gibt es eine Möglichkeit, am besten ohne js, zu positionieren und eine QuickInfo anzuzeigen, die oben einen Behälter, wenn der container muß overflow:hidden, ohne den tooltip berührt und abgeschnitten von dem container?

Hier ist ein Beispiel, um dieses problem zu veranschaulichen:

CSS:

.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;
}

HTML:

<div class="container">
  
  <a class="tooltips" href="#">Hover me for Tooltip
      <span>Tooltip</span></a>
  <div>
    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.
    </div>
  <div>

  • warum muss haben overflow:hidden ?
  • Mit der aktuellen Konfiguration, ich glaube nicht, dass das möglich ist. Wenn Sie Ihren container overflow hidden, dann werden Sie nicht in der Lage sein zu zeigen, wird die QuickInfo Kind außerhalb des Containers. Was auch immer es ist Sie versuchen, zu erreichen, mit überlauf versteckt, es ist wahrscheinlich ein weiterer Ansatz, um zu erreichen, was Sie wollen
  • da gibt es andere Sachen auf den container, die müssen nicht überlaufen außerhalb.
  • dann zeigen Sie uns den wirklichen Inhalt für eine bessere Unterstützung
  • legen Sie die anderen Sachen in einem anderen Behälter im inneren des .container und machen den neuen container overflow hidden statt. Solange Ihr tooltip ist nicht in jedem overflow hidden Elternteil, sollten Sie gut sein
  • Wenn Sie wirklich brauchen, um zu arbeiten, ohne die Struktur und Sie wissen, der tooltip Höhe, dann geben Sie padding-bottom zu overflow hidden container, bis der tooltip sichtbar wird. Es ist keine gute Lösung, da Sie den leeren Raum unter der Seite und extra scrollbar.

InformationsquelleAutor Amir Gonnen | 2016-08-25
  1. 14

    Es gibt einen Weg, um ein element in diesen Bedingungen, , indem er es absolut positioniert (als einfacher wrapper) und mit einem relativ positionierten tooltip.

    So müssen Sie, um ein element hinzuzufügen.

    Eine wichtige Voraussetzung: der Elternteil, bei overflow: hidden muss nicht positioniert werden oder der tooltip wird nicht pop-out/oben dargestellt, ist dieses Elternteil.

    CSS:

     .container {
  overflow: hidden;
  /*position: relative;*/
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
  height: 70px;
  background: lightblue;
  text-align: center;
}
.has-tooltip {
  /*position: relative;*/
  display: inline;
}
.tooltip-wrapper {
  position: absolute;
  visibility: hidden;
}
.has-tooltip:hover .tooltip-wrapper {
  visibility: visible;
  opacity: 0.7;
  /*top: 30px;*/
  /*left: 50%;*/
  /*margin-left: -76px;*/
  /* z-index: 999; defined above with value of 5 */
}

.tooltip {
  display: block;
  position: relative;
    top: 2em;
    right: 100%;
  width: 140px;
  height: 96px;
  /*margin-left: -76px;*/
  color: #FFFFFF;
  background: #000000;
  line-height: 96px;
  text-align: center;
  border-radius: 8px;
  box-shadow: 4px 3px 10px #800000;
}
.tooltip: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;
}

    HTML:

    <div class="container">
  
  <a class="has-tooltip" href="#">Hover me for Tooltip
      <span class="tooltip-wrapper"><span class="tooltip">Tooltip</span></span></a>
  <div>
    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.
    </div>
  <div>

    • Das ist interessant. Ich werde es versuchen. Irgendeine Idee was der Grund für dieses Verhalten ist, dass es nur funktioniert, wenn das übergeordnete Element nicht positioniert?
    • Natürlich nicht ^_^ selbst nach zu Fragen, ein paar sehr erfahrene CSS-Menschen (edit: es ist nicht nur die stacking-Rahmen oder Block Formatting Context - BFC, es kann ein mix aus beiden)
    • danke, ich lief in das gleiche Problem, das hat mir geholfen
    InformationsquelleAutor FelipeAls
  2. 1

    nun nutzte ich position absolute zu fixed tooltip, check es jetzt

    CSS:

    .container {  
  position: relative;
  overflow:hidden;
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
  height: 70px;
  background: lightblue;
  text-align: center;
  z-index:9;
}
a.tooltips {
  position: relative;
  display: block;
}
a.tooltips span {
  position: fixed;
  width: 140px;
  color: #FFFFFF;
  background: #000000;
  height: 96px;
  line-height: 96px;
  text-align: center;
  visibility: hidden;
  border-radius: 8px;
  z-index:9999;
  top:15px;
  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: 40px;
  left: 50%;
  margin-left: -76px;
  z-index: 999;
}

    HTML:

    <div  style="height:500px;">
<div class="container">
  <a class="tooltips" href="#">Hover me for Tooltip
      <span>Tooltip</span></a>
  <div>
    </div>

    • Fixed-position ist nicht gut, wenn Bildlaufleisten beteiligt sind
    InformationsquelleAutor Ganesh Putta
Schreibe einen Kommentar