CSS für Tooltip Anpassung verwenden

Gehen Sie wie folgt vor, um auf die CSS-Ansicht der Tooltips zuzugreifen:

1. Auf dem Whatfix Guidance Dashboard, klicken Sie Stil.

   

2. Klicken Sie Vorlagen.  

3. Klicken Sie Standard.

   

4. Gehen Sie zu der Tooltip, die Sie kopieren und anpassen möchten, und klicken Sie dann auf das Symbol Vorlage kopieren.

   

5. Gehen Sie zum Abschnitt Angepasst , um die kopierte Vorlage anzuzeigen.

6. Klicken Sie in der kopierten Vorlage auf das Symbol Vorlage bearbeiten .

7. Bearbeiten Sie unter CSS den Code entsprechend Ihrem Anwendungsfall.

8. Sobald Sie den Code geändert haben, klicken Sie auf Ausführen, um eine Vorschau der Änderungen anzuzeigen.

Note:

• Wenn Sie Zurücksetzen klicken, werden alle CSS-Änderungen verworfen, und der Code wird auf den zuletzt gespeicherten Zustand zurückgesetzt.

• Die Vorlagen, die Sie für Ihr Konto erstellen, stehen allen Benutzern zur Verfügung, die dasselbe Konto verwenden.

9. Klicken Sie Speichern.

   

min-width: 150px;
max-width: 300px;

--tip-body-bg-color: #FFA450;

 --tip-next-bg-color: #e77f3b;
 --tip-next-color: #3451d2;

height: 30px;
width: 20px;
padding-left: 10px;

stroke-width: 6px;

.tooltip-widget-with-shadow {
  box-shadow: 0 0 200px rgba(0, 0, 0, 0.6);
}

Sobald Sie die gewünschten Tooltips mithilfe der CSS-Anpassung erstellt haben, sind sie auf dem Dashboard sichtbar, damit Sie sie verwenden können. Alle angepassten Tooltips werden zu Standardvorlagen für Flows, Beacons und Smart-Tips. Außerdem bleiben alle Vorlagen auf Ihrem Dashboard für die nächste Verwendung erhalten.

1. Gehen Sie im Whatfix Dashboard auf Stil und klicken Sie entweder auf Flows, Beacons oder Smart Tips, je nachdem, welchen Tooltip Sie erstellen möchten.

   

2. Gehen Sie zu Tooltip und klicken Sie Ändern.

   

3. Wählen Sie eine der angepasst Tooltip-Vorlagen, die Sie mit der CSS Code Ansicht erstellt haben.

   

Wählen Sie die angepasste CSS-Tooltips im Studio aus, um schrittweise Änderungen an Flows, Beacons oder Smart Tips vorzunehmen. Nehmen wir zum Beispiel an, Sie haben 4 Schritte in einem Flow erstellt, die gleich aussehen; Sie möchten jedoch, dass sich Schritt 5 von den übrigen Schritten unterscheidet. Erreichen Sie diesen Anwendungsfall durch schrittweise CSS-Anpassung im Whatfix Studio.

Hier erfahren Sie, wie Sie eine benutzerdefinierte Vorlage für Schritt 5 auswählen:

1. Rufen Sie die Standardvorlage in Studio auf und klicken Sie Ändern.

2. Wählen Sie eine beliebige Vorlage aus den von Ihnen erstellten benutzerdefinierten Vorlagen.

So sieht es aus, wenn Sie die angepasste Vorlage in Schritt 5 hinzugefügt haben:

Note:

Alle Änderungen, die Sie in Whatfix Studio auf Schrittebene vornehmen, haben Vorrang vor den Änderungen, die Sie global über das Whatfix Dashboard vornehmen. Wenn Sie z. B. Schritt 5 weiter modifizieren möchten, öffnen Sie die CSS-Code-Ansicht in Studio für diesen Schritt und nehmen Sie Ihre Änderungen vor. Die Änderungen beziehen sich nur auf diesen Schritt, nicht auf die übrigen.

Führen Sie die folgenden Schritte aus, um in Studio schrittweise angepasste CSS-Vorlagen zu erstellen:

1. Klicken Sie auf Schritt hinzufügen , um Schritt 5 zu erstellen (sehen Sie das oben genannte Beispiel).

   

2. Wählen Sie das Element aus, in dem Schritt 5 angezeigt werden soll.

   Die Farbe der Tooltip ist die gleiche wie die der Tooltips auf dem Dashboard.

3. Klicken Sie Ändern , um eine andere gewünschte Vorlage für Schritt 5 auszuwählen, um sich von den übrigen Schritten zu unterscheiden.

4. Sobald Sie die gewünschte Vorlage ausgewählt haben, klicken Sie CSS , um die Codeansicht aufzurufen.

5. Nehmen Sie in der CSS-Codeansicht weitere Änderungen an der Vorlage vor.

   

   Die auf Schrittebene vorgenommenen Änderungen spiegeln sich nicht auf dem Dashboard (globale Ebene) wider und bleiben daher spezifisch und eindeutig für den Schritt, den Sie in Studio bearbeiten.