Mobirise-Tutorials.com

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?

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>

Danke, Tommy.
Das .tooltip-inner {
background-color: #ff0000;
}
hatte ich in die CSS der Seite geschrieben. Das hat aber nicht funktioniert!

Update:
Funktioniert auch nicht!
https://www.zahnarzt-schaller-plauen.de/

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

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.

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

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

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.

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?

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

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).

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/

Update:
Ich habe es jetzt hinbekommen.

Es dürfen in den Links keine alt=""-Anweisungen stehen.

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!

na prima

Mobirise-Tutorials.com

Tooltip (Javascript) in Mobirise integrieren

Tooltip (Javascript) in Mobirise integrieren

Re: Tooltip (Javascript) in Mobirise integrieren

Re: Tooltip (Javascript) in Mobirise integrieren

Re: Tooltip (Javascript) in Mobirise integrieren

Re: Tooltip (Javascript) in Mobirise integrieren

Re: Tooltip (Javascript) in Mobirise integrieren

Re: Tooltip (Javascript) in Mobirise integrieren

Re: Tooltip (Javascript) in Mobirise integrieren

Re: Tooltip (Javascript) in Mobirise integrieren

Re: Tooltip (Javascript) in Mobirise integrieren

Re: Tooltip (Javascript) in Mobirise integrieren