Tooltip (Javascript) in Mobirise integrieren

Allgemeine Fragen
Benutzeravatar
Martin73
Moderator
Moderator
Beiträge: 111
Registriert: Di 8. Dez 2020, 18:05
Wohnort: Schneckengrün
Kontaktdaten:

Tooltip (Javascript) in Mobirise integrieren

Ungelesener Beitrag von Martin73 »

Hallo Tommy (und die Anderen),

man kann ja tooltips in verschiedenen Varianten integrieren. Eine Anleitung gibt es zum Beispiel hier:
https://mobirise-tutorials.com/PortfolioM4/buttons.html
Der Hintergund ist hier schwarz!
Man kann ihn natürlich auch z. B. rot gestalten:
https://mobirise-tutorials.com/BusinessM4/Tooltip.html

Wie stellt man die Hintergrundfarbe ein?

2021-02-17.png
Keine Zeit, muss Haare machen! :D
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5746
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Tooltip (Javascript) in Mobirise integrieren

Ungelesener Beitrag von Tommy Herrmann »

Moin,

Der "Default" Wert für den Hintergrund ist von Bootstrap auf schwarz gesetzt.

Diese CSS-Klassen findest Du in der Datei "bootstrap.min.css".

Wenn Du in meinen Quelltext dieser Seite guckst:

https://mobirise-tutorials.com/BusinessM4/Tooltip.html

... findest Du oben die kommentierte Style-Anweisung (unten), die die Bootstrap-Klassen umsetzt und den Hintergrund rot macht - also auch die möglichen 4 Pfeile vom Tooltip.

Da man diese Default-CSS-Dateien tunlichst unverändert lassen sollte, habe ich diese Klassen mit dieser Style-Anweisung (unten) überschrieben, denn somit stehen diese unter der Bootstrap-Datei.

Diese Style-Anweisung steht in der Seiteneinstellungen im Bereich "Inside <head> code":

Code: Alles auswählen

  <!-- Tooltip Farbe von Default-Schwarz auf Rot geändert -->
  <style>
    .tooltip-inner {
        background-color: #ff0000;
    }
    .tooltip.bs-tooltip-right .arrow:before {
        border-right-color: #ff0000 !important;
    }
    .tooltip.bs-tooltip-left .arrow:before {
        border-left-color: #ff0000 !important;
    }
    .tooltip.bs-tooltip-bottom .arrow:before {
        border-bottom-color: #ff0000 !important;
    }
    .tooltip.bs-tooltip-top .arrow:before {
        border-top-color: #ff0000 !important;
    }
  </style>
Benutzeravatar
Martin73
Moderator
Moderator
Beiträge: 111
Registriert: Di 8. Dez 2020, 18:05
Wohnort: Schneckengrün
Kontaktdaten:

Re: Tooltip (Javascript) in Mobirise integrieren

Ungelesener Beitrag von Martin73 »

Danke, Tommy.
Das .tooltip-inner {
background-color: #ff0000;
}
hatte ich in die CSS der Seite geschrieben. Das hat aber nicht funktioniert! :confused:
Update:
Funktioniert auch nicht!
https://www.zahnarzt-schaller-plauen.de/
Keine Zeit, muss Haare machen! :D
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5746
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Tooltip (Javascript) in Mobirise integrieren

Ungelesener Beitrag von Tommy Herrmann »

na ja - bei mir geht es. Kann ich so jetzt auch nicht sagen, schon die zusätzlichen Skripts, die Du hast könnten stören.

Du schreibst die CSS aber für

data-toggle="tooltip"

... und setzt das aber gar nicht ein - wie soll es dann angezeigt werden :confused:

Code: Alles auswählen

<a href="javascript:void(0);" title="Falls Sie unterwegs sind und über kein schnelles Internet verfügen, gelangen Sie hier zu einer Variante unserer Homepage, die schneller geladen wird." data-toggle="popover" data-trigger="focus" data-html="true" data-content="<a href='https://amp.zahnarzt-schaller-plauen.de/'>EXTERNER LINK -> hier klicken!</a>" alt="Ihr Zahnarzt in Plauen">  <img src="assets/images/lte3-297x487.png" alt="Ihr Zahnarzt in Plauen" title="Schnelle Variante für Smartphone-Zahnarzt Martin Schaller in Plauen"> </a>
So "aus der Ferne" ist das auch schwer zu erkennen. Warum schreibst Du das gleich so kompliziert und dann auch noch in die Navi - übe das doch erst einmal - wie auf meiner Seite beschrieben, an einem ganz einfachen Link. Wenn es dann geht, dann baue es da bei Dir ein - Schritt für Schritt - nur so kannst Du feststellen, an welcher Stelle Dein Fehler liegt.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5746
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Tooltip (Javascript) in Mobirise integrieren

Ungelesener Beitrag von Tommy Herrmann »

... übrigens so geht das nicht mit einer "AMP" Seite :eek:

https://search.google.com/test/amp?id=k ... TWNk6KxKzg

Ungültiger AMP Code.JPG

Damit versaust Du Dir nur die ganze SEO - eine "AMP" Seite muss einen gültigen "AMP Code" besitzen, sonst ist dies SEO schädlich.

Ich kann nur immer wieder von der Verwendung von "AMP" abraten, dazu darf man keinerlei "normale" Scripts oder übliche HTML-Tags verwenden, das muss durch und durch AMP-Code sein.
Benutzeravatar
Martin73
Moderator
Moderator
Beiträge: 111
Registriert: Di 8. Dez 2020, 18:05
Wohnort: Schneckengrün
Kontaktdaten:

Re: Tooltip (Javascript) in Mobirise integrieren

Ungelesener Beitrag von Martin73 »

Das grüne Symbol ist nicht Bestandteil der Navi, sondern fixed darüber gelegt. Mein Problem ist, dass ich 2 Links benötige:
  • ein Link auf den Tooltext
  • ein Link auf die AMP-Seite
Warum ist die AMP-Seite ungültig?
Keine Zeit, muss Haare machen! :D
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5746
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Tooltip (Javascript) in Mobirise integrieren

Ungelesener Beitrag von Tommy Herrmann »

Ich habe Dir doch den Link oben zum Google AMP-Test geschrieben - rufe diesen auf und die ungültigen Elemente werden aufgelistet.

Hier zum Prüfen die URL einer AMP (Accelerated Mobile Pages) Seite eintragen:

https://search.google.com/test/amp
Benutzeravatar
Martin73
Moderator
Moderator
Beiträge: 111
Registriert: Di 8. Dez 2020, 18:05
Wohnort: Schneckengrün
Kontaktdaten:

Re: Tooltip (Javascript) in Mobirise integrieren

Ungelesener Beitrag von Martin73 »

Einige Sachen waren mir wichtig (Facebook-Share-Button von AnyAdd), habe sie aber entfernt. Was er jetzt noch anmeckert ist der Cookies-Alert, den ich nicht beeinflussen kann (macht Mobisrise). :confused:
Keine Zeit, muss Haare machen! :D
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5746
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Tooltip (Javascript) in Mobirise integrieren

Ungelesener Beitrag von Tommy Herrmann »

meines Wissens darfst Du den Mobirise "Cookie Alert" nicht in "AMP" verwenden.

Ich hatte dazu mal hier ein AMP-Skript eingebaut:

https://mobirise-tutorials.com/Mobirise-AMP/
Benutzeravatar
Martin73
Moderator
Moderator
Beiträge: 111
Registriert: Di 8. Dez 2020, 18:05
Wohnort: Schneckengrün
Kontaktdaten:

Re: Tooltip (Javascript) in Mobirise integrieren

Ungelesener Beitrag von Martin73 »

Update:
Ich habe es jetzt hinbekommen.
2021-02-18.png
Es dürfen in den Links keine alt=""-Anweisungen stehen. :aufsmaul: Erst war das bezügl. SEO wichtig, bei AMP wieder verboten!
Tooltip habe ich jetzt grün gemacht und den Link integriert. Nicht perfekt, aber geht so.
Danke, Tommy!
Keine Zeit, muss Haare machen! :D
Antworten

Wer ist online?

Mitglieder in diesem Forum: Ahrefs [Bot] und 36 Gäste