Tooltip (Javascript) in Mobirise integrieren
- Martin73
- Moderator
- Beiträge: 111
- Registriert: Di 8. Dez 2020, 18:05
- Wohnort: Schneckengrün
- Kontaktdaten:
Tooltip (Javascript) in Mobirise integrieren
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?
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?
Keine Zeit, muss Haare machen!
- Tommy Herrmann
- Site Admin
- Beiträge: 5867
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Tooltip (Javascript) in Mobirise integrieren
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":
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>
- Martin73
- Moderator
- Beiträge: 111
- Registriert: Di 8. Dez 2020, 18:05
- Wohnort: Schneckengrün
- Kontaktdaten:
Re: Tooltip (Javascript) in Mobirise integrieren
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/
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/
Keine Zeit, muss Haare machen!
- Tommy Herrmann
- Site Admin
- Beiträge: 5867
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Tooltip (Javascript) in Mobirise integrieren
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
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.
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>
- Tommy Herrmann
- Site Admin
- Beiträge: 5867
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Tooltip (Javascript) in Mobirise integrieren
... ü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.
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.
- Martin73
- Moderator
- Beiträge: 111
- Registriert: Di 8. Dez 2020, 18:05
- Wohnort: Schneckengrün
- Kontaktdaten:
Re: Tooltip (Javascript) in Mobirise integrieren
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
Keine Zeit, muss Haare machen!
- Tommy Herrmann
- Site Admin
- Beiträge: 5867
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Tooltip (Javascript) in Mobirise integrieren
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
Hier zum Prüfen die URL einer AMP (Accelerated Mobile Pages) Seite eintragen:
https://search.google.com/test/amp
- Martin73
- Moderator
- Beiträge: 111
- Registriert: Di 8. Dez 2020, 18:05
- Wohnort: Schneckengrün
- Kontaktdaten:
Re: Tooltip (Javascript) in Mobirise integrieren
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).
Keine Zeit, muss Haare machen!
- Tommy Herrmann
- Site Admin
- Beiträge: 5867
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Tooltip (Javascript) in Mobirise integrieren
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/
Ich hatte dazu mal hier ein AMP-Skript eingebaut:
https://mobirise-tutorials.com/Mobirise-AMP/
- Martin73
- Moderator
- Beiträge: 111
- Registriert: Di 8. Dez 2020, 18:05
- Wohnort: Schneckengrün
- Kontaktdaten:
Re: Tooltip (Javascript) in Mobirise integrieren
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!
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!
Keine Zeit, muss Haare machen!
- Tommy Herrmann
- Site Admin
- Beiträge: 5867
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 135 Gäste