Mahlzeit,
ich habe zwei Quellcodes. Bei Quellcode 1 habe ich einen Tooltip, welcher sein Inhalt bei Mouseover in einer Tabellenzelle öffnet. Das Laden der php-Seite dauert bei viel Inhalt (ca. 2000 Zahlen) ca. 3 Sekunden.
HTML
<style>
.tooltip {
cursor: help;
}
.tooltip em {
display: none;
}
.tooltip:hover em {
z-index: 9999;
display: block;
white-space: wrap;
left: 0; top: 0;
margin: 20px 0 0;
color: black;
font-style: italic;
border: 1px dotted black;
padding: 5px;
background: #fff4d1;
}
</style>
<span class="tooltip"> Inhalte anzeigen <em>ca. 2000 Zahlen </em></span>Quellcode 2 reagiert erst beim Klicken und lädt seinen Inhalt auch in eine Tabellenzelle. Dies dauert aber ca. 1 Minute:
HTML
<style>
#showhide:after {
content: 'Inhalt anzeigen';
display: inline-block;
}
#showhide:checked:after {
content: 'Inhalt verbergen';
}
#showhide:checked ~ #content {
height: 100%
}
#content {
height: 0;
margin: auto;
overflow: hidden;
transition: height 500ms;
}
</style>
<input type="checkbox" id="showhide">
<div id="content">ca. 2000 Zahlen</div>Warum laden beide Varianten so unterschiedliche lange?
Wie bekomme ich es hin, dass Quellcode 1 auch erst beim Klicken reagiert und wenn außerhalb des Focus geklickt wird, soll es wieder zugehen!?
