0
(0)

GenerateBlocks – Tooltips schnell erstellen

letzte Änderung: 15. Februar 2024


ACHTUNG! Bitte lesen!

Du benutzt das hier Gezeigte natürlich, wie immer, auf eigenes Risiko!
Ich habe alles selbst durchgeführt und mir mein System nicht zerschossen oder sonst irgendwelche negativen Auffälligkeiten bemerkt.

Aber dennoch… Backups sind immer gut….
Für WordPress-Backups am besten mit UpdraftPlus

Ich übernehme keine Haftung für irgendwelche Schäden am System, der Hardware oder der Katze…. :-P

Affiliate - Links

Auf meiner Seite verwende ich sogenannte Affiliate-Links, diese sind mit einem gekennzeichnet, damit du diese auch direkt erkennen kannst.

Sobald du über so einen Link das Produkt kaufen würdest, erhalte ich möglicherweise eine Provision vom jeweiligen Anbieter.
Außerdem entstehen für Dich natürlich keine zusätzlichen Kosten!
Mich unterstützt du damit aber enorm und trägst dazu bei, dass es auch in Zukunft weitere Guides und Vorstellungen von mir hier geben wird.

Ich empfehle nur Tools / PlugIns / Anbieter / Produkte, hinter denen ich auch wirklich stehe, bzw. ich auch einen Mehrwert sehe.

DarkWolfCave.de ist Teilnehmer des Amazon-Partnerprogramm, das zur Bereitstellung eines Mediums für Webseiten konzipiert wurde, mittels dessen durch die Platzierung von Partner-Links zu Amazon.de Entgelte verdient werden können.

aedba65e23cf4178aa17efe89838c91b

GenerateBlocks – Tooltips schnell Erstellen

Ich stand vor kurzem vor dem Problem, dass ich für einige meiner Icons gerne einen Tooltip anzeigen lassen möchte.
Leider bietet GenerateBlocks dies nicht so ohne weiteres an. Daher machte ich mich auf die Suche um dieses Problem lösen zu können. In diesem Beitrag zeige ich dir, wie du mithilfe von GenerateBlocks und etwas CSS-Code in kürzester Zeit ansprechende Tooltips für deine Icons erstellen kannst.

DarkWolfCave.de

GenerateBlocks – Schnelles Erstellen von Tooltips

Von Anfang an nutze ich GeneratePress und GenerateBlocks für meine Webseiten. Daher beziehen sich die Anleitungen in der Kategorie bzw. Serie “GenerateBlocks” auf diese Plugins/ThemeBuilder.

Es lässt sich hier sehr vieles ohne große Probleme einstellen, konfigurieren und anpassen. Leider gibt es jedoch bisher keine Möglichkeit, von Haus aus Tooltips zu erstellen. Natürlich könnte ich ein weiteres Plugin installieren, aber das erscheint mir dann doch unnötig, vor allem weil ich nach dem Motto vorgehe: “Je weniger Plugins, desto besser”.

Nach ein paar Recherchen fand ich eine geniale Lösung, um mit Hilfe von CSS in GenerateBlocks eigene Tooltips erstellen zu können.

Das gesamte Video von Web Dev Simplified beschreibt alle Details zu dem CSS. Schau dort gerne vorbei falls du tieferen Einblick erhalten möchtest:

Sie sehen gerade einen Platzhalterinhalt von Youtube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

CSS – Code für GenerateBlocks Tooltips

Hier zeige ich dir den gesamten CSS-Code und wie du es bei dir einbauen und deine Icons mit Tooltips bestücken kannst:

.tooltip{
	position: relative;
}

.tooltip:before,
.tooltip:after{
	--scale: 0;	
	--arrow-size: 8px;
	--tooltip-color: hsla(191, 0%, 95%, 0.9);
        --tooltip-text-color: #222222;
	position: absolute;
	top: -.25rem;
	left: 50%;
	transform: translateX(-50%)  translateY(var(--translate-y, 0)) scale(var(--scale));
	transition: 150ms transform;
	transform-origin: bottom center;
}

.tooltip:before{
	--translate-y: calc(-100% - var(--arrow-size));
	content: attr(data-tooltip);
        color: var(--tooltip-text-color);
	font-size: .8rem; 
	line-height: 1;
	padding: .4rem .6rem;
	width: max-content;
	background: var(--tooltip-color);	
	border-radius: .3rem;
	text-align: center;
}

.tooltip:hover:before,
.tooltip:hover:after{
	--scale: 1;
}

.tooltip:after{
	--translate-y: calc(-1 * var(--arrow-size));
	content:'';
	border: var(--arrow-size) solid transparent;
	border-top-color: var(--tooltip-color);
	transform-origin: top center;
}

Mit diesen Werten bekommst du einen Tooltip der hellgrau sowie halbtransparent ist und der enthaltene Text in einer dunkelgrauen Farbe dargestellt wird.
Natürlich kannst du diese Eigenschaften ändern, indem du die Werte bei “–tooltip-color” und “–tooltip-text-color” entsprechend anpasst.

GenerateBlocks-Tooltips schnell erstellen

Du kannst den CSS – Code in dein Child-Theme, über das Plugin “Snippets” oder direkt bei “Design – Customizer” hinzufügen.
Wir befassen uns hier mit der letzten Variante. Also einfach den Customizer-Bereich öffnen und bei “Zusätzliches CSS” einfügen: (speichern / veröffentlichen nicht vergessen)

GenerateBlocks Tooltips CSS

GenerateBlocks – Tooltips einbauen

Jetzt haben wir die Grundlage geschaffen, aber wie und wo musst du jetzt noch etwas einfügen, damit auch an der richtigen Stelle der gewünschte Tooltip erscheint?

Zum Glück können wir jetzt wieder auf vorhandene Funktionen bzw. Einstellungen zurückgreifen.
Öffne das Element wo du deinen Tooltip sehen möchtest. In meinen Beispiel ist es ein Icon welches in dem Element Footer vorhanden ist.

GenerateBlocks Tooltips schnell erstellen

Bei den Eigenschaften den Punkt “Erweitert” aufklappen und bei “Zusätzliche CSS-Klasse(n)” den Namen unserer neuen Tooltip-Klasse eintragen. In diesem Fall “tooltip“:

CSS-Klasse tooltip

Nun fehlt uns natürlich noch der eigentliche Wert, also das, was dein Besucher dann sehen soll.
Diesen tragen wir erneut über eine bereits vorhandene Möglichkeit ein. Denn direkt unter dem Punkt zusätzliche CSS-Klassen gibt es die “Custom Attributes“.
Einmal auf “Add Attribute” klicken und im ersten Feld “data-tooltip” sowie im zweiten den Wert, der angezeigt werden soll, eintragen:

darkwolfcave - Custom Attributes

Das war es auch schon. Solltest du, so wie bei mir, mehrere Elemente haben, bei denen du unterschiedliche Tooltips nutzen möchtest, musst du natürlich jedes einzelne entsprechend anpassen.
Wichtig ist noch, deinen Cache zu löschen oder zu erneuern (oder bei WP Rocket “benutztes CSS leeren”).

Viel Spaß mit deiner neuen Möglichkeit, bei GenerateBlocks- Tooltips ab jetzt überall anzuzeigen, wo du möchtest!