5
(3)

GenerateBlocks Tooltips schnell erstellen

Erstellt / aktualisiert

wichtige Informationen...

Affiliate - Offenlegung

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. bei denen ich auch einen Mehrwert sehe.

DarkWolfCave.de ist Teilnehmer des Amazon-Partnerprogramms, 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.


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 Schäden jeglicher Art am System, der Hardware oder der Katze…. :-P


DarkWolfCave.de

GenerateBlocks – Tooltips schnell erstellen

Ich stand in jüngster Vergangenheit vor dem Problem, dass ich für einige meiner Icons in meinem GeneratePress Theme gerne einen Tooltip anzeigen lassen wollte.
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, GeneratePress 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 GeneratePress 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 in einem GeneratePress Theme einbauen

Du wirst hier einen groben Überblick finden.
Allerdings biete ich dir auch noch etwas mehr Support an:

  • Du benötigst persönlichen Support
  • Du möchtest von Beginn an Unterstützung bei deinem Projekt
  • Du möchtest ein hier vorgestelltes Plugin durch mich installieren und einrichten lassen
  • Du würdest gerne ein von mir erstelltes Script etwas mehr an deine Bedürfnisse anpassen

Für diese Punkte und noch einiges mehr habe ich einen limitierten
VIP-Patreon Tarif
eingerichtet. Falls er dir dort zurzeit nicht angeboten wird,
kontaktiere mich bitte über Discord und wir finden eine Lösung!

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 meinem 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 WPRocket “benutztes CSS leeren”).

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


Avatar-Foto

Ich bin ein 1977 geborener Technik-Nerd. Mein erster Gefährte in der digitalen Welt war ein C64, der den Grundstein für meine Leidenschaft für Technologie legte. So wurde mein Hobby zum Beruf, und ich begann eine Ausbildung zum IT-Systemelektroniker. Selbst in meiner knappen Freizeit widme ich mich weiterhin meiner Leidenschaft fürs Gaming, verschiedene Programmiersprachen und andere IT-bezogene Themen. Ansonsten mag ich Hunde und bin fasziniert von Wölfen!

Gefällt dir der Beitrag?
Hinterlasse gerne ein paar Sterne!

Wie hilfreich war dieser Beitrag für Dich?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 5 / 5. Anzahl Bewertungen: 3

Bisher keine Bewertungen! Sei der Erste, der diesen Beitrag bewertet.

Es tut uns leid, dass der Beitrag für dich nicht hilfreich war!

Lasse uns diesen Beitrag verbessern!

Wie können wir diesen Beitrag verbessern?

Abonnieren
Benachrichtige mich bei
guest
0 Kommentare
Inline Feedbacks
Alle Kommentare anzeigen

GitHub - Sourcecode

Den gesamten und aktuellen Sourcecode meiner Scripte, Snippets und Tools findest du ab jetzt auch in meinem GitHub Account!
Inhalt