Klickbarer Tooltip soll über Tabellenzelle hinaus angezeigt werden

halloICKEbins

Mahlzeit,

ich habe den nachfolgenden Code von: https://bit01.de/demo/demo-clickable-tooltip-css3/ und würde gerne das wie in meinem Beispiel beim Klicken des Tooltips dieser angezeigt wird, ohne dass sich die Tabellenzelle in der Größe ändert. Die Zelle ist nur so groß wie der Inhalt.

Code

.tooltips-focus {
  position: relative;
  display: inline;
  cursor: help;
  border-bottom:1px dotted;
}
.tooltips-focus span {
  position: absolute;
  width:140px;
  color: #FFFFFF;
  font-size:0.8em;
  background: #000000;
  text-align: center;
  visibility: hidden;
  padding:5px 8px;
  border-radius: 6px;
}
.tooltips-focus span:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-top: 8px solid #000000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}


.tooltips-focus input {
    position:absolute;
    left:-9999px;
    top:-9999px;
} 


.tooltips-focus input:focus ~ span {
  visibility: visible;
  opacity: 0.8;
  bottom: 25px;
  width:150px;
  left: 50%;
  margin-left: -82px;
  z-index: 999;


}

Alles anzeigen

Code

...
    <td>
            <i class="tooltips-focus">
                <input type="checkbox" id="clickevent_1">
                <label for="clickevent_1">x</label>
                <span>Hier der ausgeklappte Text!</span>
            </i>
    </td>

Wie bekomme ich des weiteren hin, dass sich der Tooltip automatisch ausrichtet. Zum Beispiel, wenn die Zelle am rechten Rand ist, verschwindet die Hälfte des Toopltips - das sollte ja so nicht sein!

Tags