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!?