Tooltip und CSS

Im Tooltip kann auch HTML verwendet werden um einfache Style-Anpassungen vorzunehmen, Bilder hinzuzufügen, uvm.

Die im Folgenden beschriebenen CSS-Codes können z.B. im WordPress-Customizer unter „zusätzliches CSS“ hinterlegt werden oder in einer CSS-Datei, welche über das Theme oder ein Plugin eingebunden wird. Je nach Version des CMS und den eingesetzten Plugins und Themes gibt es ggf. mehrere unterschiedliche Stellen wo CSS-Code hinterlegt werden kann. CSS-Selektoren können auch in JavaScript-Code verwendet werden um z.B. Mouseover- oder Click-Events abzufangen, den Inhalt der Tooltips dynamisch anzupassen oder ähnliches.

Die möglichen CSS-Selektoren können Sie z.B. mit den dev-Tools im Browser ermitteln.

Hierzu klicken Sie mit rechts auf den Tooltip und wählen dann „Element untersuchen“, „inspect element“ oder etwas ähnliches (je nach Browser/Version/Spracheinstellungen)

Sie sehen dort z.B. class=“imagemap_tooltip …“

Da diese Klasse bei jedem Tooltip vorhanden ist können Sie alle Tooltips mit dem CSS-Selector .imagemap_tooltip ansprechen (also vor dem Klassennamen einen Punkt ergänzen).

Um die Hintergrundfarbe zu ändern können Sie also z.B. den folgenden CSS-Code verwenden:

.imagemap_tooltip{
    background-color: green!important;
}

!important ist in diesem Fall leider notwendig, da die weiße Standard-Hintergrundfarbe direkt per style=“…“ festgelegt ist.

Das Plugin selbst nutzt hier für das CSS-Design den Selector .imagemap_content .imagemap_tooltip.active

Es wäre auch möglich einzelne Tooltips über die ID anzusprechen und so individuell zu stylen. Hierfür können Sie einfach die ID kopieren und eine Raute davor schreiben, im Beispiel also:

#aeImgMapID3613414653_tooltip_Postleitzahlenbereich_96{
    border-radius: 20px;
}

um diesen einzelnen Tooltip mit abgerundeten Ecken zu stylen. Es hat außerdem jeder Tooltip auch eine CSS-Klasse in dem die ID vorkommt. Folgendes ginge also auch um einen individuellen Tooltip zu stylen:

.aeImgMapmappostleitzahlendeutschlandzweistellig_tooltip_Postleitzahlenbereich_96{
    font-family: times new roman, serif;
}

Zum Beispiel mit border- oder box-shadow Regeln, Alphakanal in der Hintergrundfarbe oder CSS-Animationen können interessante individuelle Effekte erzeugt werden.

.imagemap_tooltip {
  background-color: transparent!important;
  border-radius: 10px;
  background-image: linear-gradient(45deg, #0000ff88, rgb(69 143 51 / 86%))!important;
  box-shadow: 10px 10px 5px #ff000077;
  border: 3px outset #ffaa00!important;
}