Tooltip immer sichtbar anzeigen 
Автор: Cookie G.
Просмотрено 608,
Подписчики 1,
Размещенный 0
Hallo zusammen
Wie kann man den Tooltip immer anzeigen lassen? Ich hätte gerne beim Objekt Logo Slider den Tooltip immer sichtbar. Gibt es dafür eine Lösung?
Gruss
Cookie
Размещено

Hello Cookie,
unfortunately the object does not include this option, so you would need to attempt achieving this with custom code.
I remain available.
Online translation:
Hallo Cookie,
leider enthält das Objekt diese Option nicht, daher müssten Sie versuchen, dies mit benutzerdefiniertem Code umzusetzen.
Ich stehe Ihnen weiterhin zur Verfügung.
Автор
Weiß jemand wie so ein benutzerdefinierten Code aussehen soll?
Entweder einen Link zur Seite mit dem Logo Slider posten, damit CSS- bzw. JavaScript-Experten online testen können, oder warten bis sich ein Nutzer mit Logo Slider meldet und helfen kann.
Als Alternative könnte man das Objekt "Content Slider" verwenden, siehe meine Testseite
>> https://findelinks.de/123test-aufklappmenue-2/objekt-content-slider-als-logo-slider.html
Kurzanleitung:
Es wird nur das Bild und der Button-Text verwendet, die anderen Textfelder bleiben leer.
Der Hintergrund bleibt transparent, ohne Farbe und ohne Hintergrundbild.
Bei "Stil" die Einstellungen "Bild oben, Inhalte unten".
[X] Automatische Wiedergabe, z.B. 3 Sekunden.
----- 2 Screenshots mit den Inhalten und Einstellungen -----
-----
Ein 2. Alternative - hier habe ich 1 Text-Objekt und dort die Rollover-Funktion genutzt, siehe
----- Anleitung -----
So erstellen Sie einen scrollbaren Text
https://guide.websitex5.com/de/support/solutions/articles/44001224841
-----
Das Beispiel 2 ist ebenfalls auf meiner Testseite zu sehen, wenn man etwas nach unten scrollt.
Hier wurde Bild mit den 3 Logos 3x hiereinander ohne Abstand im Text-Objekt eingefügt, auch wenn es im Text-Objekt untereinander angezeigt wird.
Der Hintergrund des Bildes kann auch transparent gemacht werden.
Hier gibt es eine Unterbrechung, wenn die 3 Bilder mit den jeweils 3 Logos durchgelaufen sind.
----- Das verwendete Bild enthält 3 Logos und den Text -----
----- Einstellungen -----
Nachtrag:
Wenn im Beispiel 2 die Logos verlinkt werden sollen, dann pro Bild nur 1 Logo.
Beispiel 2 ist aufwändiger in der Erstellung und nur falls das Objekt "Content Slider" ungeeignet ist bzw. das Objekt "Logo Slider" nicht per JavaScript-Code um die Textanzeige erweitert werden kann.
Evtl. kann KolAsim (Moderator) einen JavaScript-Code bereitstellen, allerdings wird dann ein Link zur Seite mit dem Objekt "Logo Slider" benötigt.
Автор
Danke Daniel
Ich habe zu jedem Logo ein Link. Cool wäre eine Beschreibung zum Logo, damit man weiss um was es sich handelt.
Hier mal mein Link zur Homepage: Anreiseinformationen - Hotel - Restaurant Gabriel - 7550 Scuol - Engadin - Graubünden
Gruss
Cookie
Beim Objekt "Logo Slider" müssten anderen Nutzer bzw. JavaScript-Experten helfen.
Ich habe mein Beispiel 2 vereinfacht, die Bilder bzw. Logos sind jetzt ohne Textbeschriftung, da die Beschriftung einfach als Text (bei Bedarf auch verlinkt) im Text-Objekt eingfügt wird, siehe
>> https://findelinks.de/123test-aufklappmenue-2/logoslider-mit-text-objekt.html
-----
Автор
Hallo Daniel
So kann man es auch machen, nur ist es Responsive schöner mit dem Logo Slider. Die Logos passen sich an und kommen fortlaufend... beim Textfeld kommt lange nichts danach (zumindest in der Vorschau). Und es ist mal wieder eine Bastelei, so kann ich dass auch im Photoshop bearbeiten, was ich eigentlich vermeiden möchte.
Gruss
Cookie
sag mir genau was du willst, ich mach da was...
Автор
Ich wollte eigentlich nur beim Logo Slider, dass das Tooltip immer sichtbar ist.
Hier ein Link zu meiner Homepage:
https://www.hotel-gabriel.ch/anreiseinformationen.html
(It > De) ... Da Sie Ihren Link wie von Daniel vorgeschlagen gepostet haben, präsentiere ich Ihnen hier meine Anpassung basierend auf Ihrer Webseite.
Sie können die Beschreibungen der Tabs anpassen, die nun vier pro Folie anzeigen.
Wenn Sie die Struktur ändern, müssen Sie die neuen IDs für die entsprechenden Selektoren ermitteln.
…Sie können den Code anwenden, indem Sie ihn in die Seiteneigenschaften unter „Experte | Benutzerdefinierter Code“ einfügen und die Option „Vor dem Schließen des /HEAD-Tags“ wählen.
…
<script>
$(window).on("load", function() { /*K*/
/** ToolTip x logo-slider x WSx5 by KolAsim **/
const configs = [
{ selector: "#pluginAppObj_14_762_container .logo-slide-img", descrizioni: ["AAAaaa slide1 1", "AAAaaa slide1 2", "AAAaaa slide1 3", "AAAaaa slide1 4"], tooltipId: "tooltip762" },
{ selector: "#pluginAppObj_14_765_container .logo-slide-img", descrizioni: ["BBBbbb slide2 1", "BBBbbb slide2 2", "BBBbbb slide2 3", "BBBbbb slide2 4"], tooltipId: "tooltip765" },
{ selector: "#pluginAppObj_14_763_container .logo-slide-img", descrizioni: ["CCCccc slide3 1", "CCCccc slide3 2", "CCCccc slide3 3", "CCCccc slide3 4"], tooltipId: "tooltip763" },
{ selector: "#pluginAppObj_14_764_container .logo-slide-img", descrizioni: ["DDDddd slide4 1", "DDDddd slide4 2", "DDDddd slide4 3", "DDDddd slide4 4"], tooltipId: "tooltip764" } ];
/**--K--**/ configs.forEach(cfg => { initTooltip(cfg.selector, cfg.descrizioni, cfg.tooltipId); }); /**K**/});
function initTooltip(selector, descrizioni, tooltipId) { if (!$("#customTooltipStyle").length) { $("head").append(` <style id="customTooltipStyle"> .customTooltip { position: absolute; display: none; background: rgba(0,0,0,0.8); color: #fff; padding: 6px 10px; border-radius: 6px; font-size: 12px; pointer-events: none; z-index: 9999; white-space: nowrap; } </style> `); } let tooltip = $("#" + tooltipId); if (!tooltip.length) { tooltip = $('<div class="customTooltip" id="' + tooltipId + '"></div>').appendTo("body"); } var K = $(selector); K.each(function() { var index = parseInt($(this).attr("data-index"), 10) || 0; $(this) .attr("title", "") .data("descrizione", descrizioni[index] || "") .off("mouseenter mousemove mouseleave") .on({ mouseenter: function() { tooltip .stop(true, true) .text($(this).data("descrizione")) .fadeIn(150); }, mousemove: function(e) { tooltip.css({ top: e.pageY + 10, left: e.pageX + 10 }); }, mouseleave: function() { tooltip.stop(true, true).fadeOut(150); } }); }); }
</script>
.
ciao
.
.
Eingefügte Bilder:
Die Bilder können im Text-Objekt (ohne vorherige Bearbeitung in Photoshop) in der Größe angepasst werden, dazu das eingefügte Bild normal anklicken bis sich ein gestrichelter Rand zeigt.
Dann mit der rechten Maustaste das Bild anklicken, im Auswahlmenü "Bildgröße" anklicken und die Höhe ändern, dabei das Schloss zu lassen, damit das verkleinerte Bild proportional bleibt.
Lücken im Bilderlaufband:
Bei der Art von Marquee-Laufband, wie sie die Rollover-Funktion erstellt, bleiben leider Lücken.
Die Alternative wäre ein HTML- und CSS-Code. Die Google-Ki lieferte auf meine Anfrage keinen funktionierenden Code. Hier wären zusätzlich zur KI auch die CSS-Experten gefragt.
Mit einem Bilder-Laufband in HTML-/CSS-Code dürfte das Ganze noch komplizierter werden.
Evtl. kommt die Hilfe von Incomedia:
Die einfachste Lösung wäre die Erweiterung des Objektes "Logo Slider" durch Incomedia, allerdings darf man darauf wohl eine halbe Ewigkeit warten.
Автор
Ciao KolAsim
Eigentlich hatte ich es so gemeint wie auf dem Bild. Möchte beim Tooltip den Text eingeben und es sollte immer Sichtbar sein, ohne mit der Maus darüber zu fahren.
Gruss
Cookie
Teste mal diesen code, unter 1 Einstellungen, Statistik und code, und da rein vor dem /headtag
<style>
/* 1. Platzhalter für den Tipp unter dem Bild schaffen */
div[id^="pluginAppObj"] .owl-item {
padding-bottom: 50px !important;
overflow: visible !important; /* Wichtig für Apple/Safari */
}
/* 2. Den Tipp für alle Geräte (auch Apple) formatieren */
div[id^="pluginAppObj"] .owl-item .caption,
div[id^="pluginAppObj"] .owl-item .tooltip {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%); /* Apple/Safari Fix */
background: #ffffff;
padding: 4px 10px;
border: 1px solid #800;
color: #333;
font-size: 12px;
line-height: 1.2;
white-space: nowrap;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Apple/Safari Fix */
z-index: 100;
margin-top: 5px;
}
/* 3. Responsive Anpassung: Auf kleinen Handys Text verkleinern */
@media (max-width: 480px) {
div[id^="pluginAppObj"] .owl-item .caption,
div[id^="pluginAppObj"] .owl-item .tooltip {
font-size: 10px;
padding: 2px 6px;
white-space: normal; /* Erlaubt Zeilenumbruch, falls das Wort zu lang ist */
max-width: 90%; /* Verhindert Überlappen am Bildschirmrand */
}
div[id^="pluginAppObj"] .owl-item {
padding-bottom: 40px !important;
}
}
</style>
...Ich habe den Code, den du gerade gepostet hast, vielleicht nicht verstanden, aber er scheint funktionslos zu sein und hat nichts mit der eigentlichen Frage zu tun...
...x Cookie G. ...hast du nach einem Tooltip gefragt, und genau das macht mein Code...

...Was du jetzt möchtest, ist etwas anderes, und das lässt sich einfach und ohne zusätzlichen Code erreichen; ...du musst die Beschreibung einfach in die Bilddatei einfügen, genau wie du es vorhin in deinem STAMP-Beispiel gemacht hast; ...es sind nur 16 Bilder und in einer Viertelstunde könnte man fertig sein...
...+... wenn Sie jedoch wirklich meinen EXTRA-Code verwenden und sich von der Logik meiner vorherigen Erfindung inspirieren lassen möchten, könnten Sie dieses Ergebnis gemäß meinem STEMPEL erhalten, und wenn Sie daran interessiert sind, wie Sie es sehen, lassen Sie es mich wissen und ich werde hierher zurückkommen, ... tschüss...
.
Автор
Hallo Bernhard
Dein Script tut einen Platz machen für den Tooltip, ist aber nicht immer sichtbar. Wenn ich mit der Maus darüber fahre, kommt es so wie in WSx5.
Ich habe mir die Seite mit den 4 Bilder-Laufbänder in Firefox, Edge und Chrome angeschaut, aber ich konnte beim Mouserover keine Texteinblendungen sehen.
Wenn ich es nicht sehen kann, dann stellt sich die Frage: Wieviele Besucher können es sehen?
Gibt es ein Beispiel (Screenshot) wie das bei Mouseover normalerweise aussieht.
Auf meiner Webseite werden Bilder bei Mouseover so angezeigt, siehe Screenshot
-----
Автор
Hallo zusammen
Hier mal wie und was ich möchte.
Mit Javascript wird bei Mouseover der Text "Ortsplan (PDF)" eingeblendet, siehe Screenshot unten
Hier könnten evtl. die JavaScript-Experten ansetzen, um diesen Text auslesen und im Zwischenraum unter dem Bildlaufband einzublenden.
Allerdings habe ich keine JavaScript-Kenntnisse, deshalb hatte ich gehofft, dass vielleicht KolAsim den passenden JavaScript-Code zur automatischen Textübernahme schreiben könnte.
----- Screenshot -----
Leider verstehe ich das nicht ganz, und es scheint, als wären die Ideen für Tooltips und Beschreibungen entweder schon ausgeschöpft oder nicht mehr relevant.
ciao
.
Nach der Anleitung gibt es für die Barrierefreiheit einen Alternativtext, siehe
----- Auszug aus der Anleitung für das Objekt "Logo Slider" -----
Für jedes Bild können Sie:
>> https://guide.websitex5.com/de/support/solutions/articles/44002138322
-----
Und für die Neugierigen gibt es einen Infotext bei Mouseover, das sollte eigentlich genügen.
Vielleicht den Wunsch als Idee posten, evtl. übernimmt Incomedia die Idee beim einem Update.
Автор
Es geht immer nur mit Mousover.
Es gibt da wohl diese 2 Möglichkeiten:
Mir selber fehlen leider die JavaScript-Kenntnisse.
...du hast mich nicht gewarnt, ich habe gesehen, dass du den Tooltip hinzugefügt hast, der vorher nicht da war...

...mit einer kleinen Änderung meiner vorherigen Erfindung kannst du die relativen Werte der Tooltips anstelle von benutzerdefinierten Werten verwenden...
...das Ergebnis, das du erzielen könntest, wäre wie in dieser meiner STAMPs online simuliert:
.
Автор
Hallo Daniel
Nr. 1 wird in diesem Leben nicht mehr passieren ;-)
Автор
Ciao KolAsim
Es ging schon die ganze Zeit um den Tooltip so wie der Titel schon sagt.
Es wird dir nichts bringen die Tooltips von Haus aus anzuzeigen, denn wenn alle gleich angezeigt werden, dann überlappen sich viele. Wenn dann müsstest du den Tooltip viel kleiner machen mit kleiner SChriftart damit alles angezeigt wird. Am Desktop mit großen Bildschirmen ist es vielleicht schön anzusehen, aber ab Tabelt quer und tiefer wird es überlappen. Hier müsste dann auch individueller Code eingefügt werden, damit alles kleiner wird.
Die MEthode wie KolAsim mit unterer Beschriftung wäre noch am einfachsten.
Автор
Hallo KolAsim
Wie würde dann der Script aussehen?
... ... OK... Tut mir leid, die Übersetzung und die Beispiele waren nicht verständlich oder haben nicht zur Klärung beigetragen, das ist okay ... tschüss.
.
...wenn Sie genau wissen möchten, wie Sie die (schwarzen) Beschreibungen hier sehen, lassen Sie es mich wissen:
.
Hallo, neuer versuch:
Was dieser Code bewirkt:
Optik: Die Tooltips sehen jetzt aus wie kleine, saubere Info-Karten (Weißer Hintergrund, leichter Schatten).
Stabilität: Das Skript unterbindet aktiv das mouseleave-Event. Das bedeutet: Selbst wenn man mit der Maus wieder weggeht, "denkt" die Website, die Maus sei noch da.
Überlagerung: Durch z-index: 10000 liegen die Tooltips immer über den Bildern oder Texten, damit sie nicht verdeckt werden.
Diesen code unter 1 code einfügen bitte und neu hochladen:
<style>
/* 1. SICHTBARKEIT ERZWINGEN */
.imTooltip,
[id^="imTooltip"],
div[class*="Tooltip"] {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: absolute !important; /* Verhindert das Verschieben des Layouts */
z-index: 10000 !important;
}
/* 2. DESIGN-ANPASSUNG (Kann dein Freund nach Belieben ändern) */
.imTooltip, [id^="imTooltip"] {
background-color: #ffffff !important; /* Weißer Hintergrund */
color: #333333 !important; /* Dunkelgrauer Text */
border: 1px solid #cccccc !important; /* Dezenter grauer Rand */
border-radius: 5px !important; /* Abgerundete Ecken */
padding: 8px 12px !important; /* Innenabstand für bessere Lesbarkeit */
box-shadow: 0px 4px 10px rgba(0,0,0,0.1) !important; /* Sanfter Schatten für Tiefe */
font-size: 13px !important; /* Einheitliche Schriftgröße */
max-width: 250px !important; /* Verhindert zu breite Boxen */
line-height: 1.4 !important;
}
/* Kleiner Pfeil-Indikator (optional, falls WSx5 den mitsendet) */
.imTooltip:after {
border-color: transparent transparent #ffffff transparent !important;
}
</style>
<script>
(function() {
function activateTooltips() {
// Alle Elemente finden, die Tooltips besitzen könnten
const triggers = document.querySelectorAll('[title], [data-tooltip], .imTooltip');
triggers.forEach(el => {
// WSx5 dazu zwingen, den Tooltip-Inhalt zu generieren
el.dispatchEvent(new Event('mouseenter'));
el.dispatchEvent(new Event('mouseover'));
// Falls das "title"-Attribut noch da ist, entfernen wir es kurzzeitig,
// damit der Standard-Browser-Tooltip nicht zusätzlich erscheint
if (el.title) {
el.setAttribute('data-original-title', el.title);
el.title = '';
}
});
// Alle Tooltip-Container im DOM finden und fixieren
const allTooltips = document.querySelectorAll('.imTooltip, [id^="imTooltip"]');
allTooltips.forEach(tip => {
tip.style.setProperty('display', 'block', 'important');
tip.style.setProperty('opacity', '1', 'important');
tip.style.setProperty('visibility', 'visible', 'important');
// Verhindert, dass der Tooltip beim Wegbewegen der Maus verschwindet
tip.onmouseleave = function(e) { e.stopPropagation(); };
});
}
// Ausführung beim Laden und nach einem kurzen Delay
window.addEventListener("load", function() {
activateTooltips();
// Sicherheitshalber nach 2 Sekunden nochmal triggern für dynamische Inhalte
setTimeout(activateTooltips, 2000);
});
})();
</script>
Автор
Hallo Bernhart
Bei mir finktioniert es nicht, hast du bei bir mal ausprobiert?
Ich bin erst mo oder di am pc
schiu was die ki sagt:
Das Problem liegt wahrscheinlich daran, dass WebSite X5 den Tooltip-Inhalt erst in dem Moment in das Feld schreibt, wenn die Maus wirklich darüber fährt. Wenn wir das Feld per CSS einfach "sichtbar" machen, bleibt es leer, weil das Skript von WebSite X5 noch keinen Text hineinkopiert hat.
Hier ist eine verbesserte Version des Codes. Ich habe den Teil angepasst, der den Text aus dem title-Attribut direkt in den Tooltip-Container kopiert, damit er nicht leer bleibt.
Was hat sich geändert?
Ein wichtiger Hinweis: Wenn die Tooltips auf der Seite an der falschen Stelle erscheinen (z.B. alle oben links in der Ecke kleben), liegt das daran, dass WebSite X5 die Position normalerweise dynamisch beim Mouseover berechnet. Falls das passiert, müsste man zusätzlich noch die Koordinaten des Objekts auslesen und auf den Tooltip übertragen. Probier aber erst einmal diesen Code aus – oft reicht das manuelle Befüllen des Inhalts schon aus!
<style>
/* 1. SICHTBARKEIT ERZWINGEN */
.imTooltip,
[id^="imTooltip"],
div[class*="Tooltip"] {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: absolute !important;
z-index: 10000 !important;
}
/* 2. DESIGN & INHALT-FIX */
.imTooltip, [id^="imTooltip"] {
background-color: #ffffff !important;
color: #333333 !important;
border: 1px solid #cccccc !important;
border-radius: 5px !important;
padding: 8px 12px !important;
box-shadow: 0px 4px 10px rgba(0,0,0,0.1) !important;
font-size: 13px !important;
max-width: 250px !important;
line-height: 1.4 !important;
min-height: 20px; /* Verhindert komplett flache Boxen */
}
</style>
<script>
(function() {
function fixTooltipContent() {
// Alle Elemente finden, die einen Tooltip auslösen
const triggers = document.querySelectorAll('[title], [data-tooltip]');
triggers.forEach(el => {
// Text sichern
const content = el.getAttribute('title') || el.getAttribute('data-tooltip');
if (content && content.trim() !== "") {
// Event triggern, damit WSx5 den Tooltip-Container im DOM erstellt
el.dispatchEvent(new Event('mouseenter'));
// Kurz warten, bis WSx5 das Element erzeugt hat
setTimeout(() => {
// Suche nach dem Tooltip-Element, das WSx5 erstellt hat
// Oft haben diese IDs wie 'imTooltip_...'
const tooltips = document.querySelectorAll('.imTooltip, [id^="imTooltip"]');
tooltips.forEach(tip => {
// Wenn der Tooltip leer ist, füllen wir ihn manuell mit dem Title-Text
if (tip.innerHTML.trim() === "") {
tip.innerHTML = content;
}
// Sichtbarkeit halten
tip.style.setProperty('display', 'block', 'important');
tip.style.setProperty('opacity', '1', 'important');
});
}, 100);
// Title entfernen, um Standard-Browser-Tooltip zu unterdrücken
el.setAttribute('data-original-title', content);
el.removeAttribute('title');
}
});
}
// Ausführung
window.addEventListener("load", function() {
// Kleiner Delay, damit WSx5 mit seinen eigenen Skripten fertig ist
setTimeout(fixTooltipContent, 1000);
});
})();
</script>
Hallo Cookie G., ... tut mir leid, ich verlasse dieses Thema, da es sich für mich zu lang und ausschweifend entwickelt hat.
Wenn du meine Ausführungen und Vorschläge verstanden hast und weiterhin Interesse hast, eröffne bitte ein neues Thema, und wir können uns dort wiedersehen. Ansonsten ignoriere es einfach, als wäre nichts gesagt worden.
Tschüss, ciao
.