WebSite X5Help Center

 
Cookie G.
Cookie G.
User

Tooltip immer sichtbar anzeigen  de

Автор: Cookie G.
Просмотрено 610, Подписчики 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 

Размещено
38 Ответы - 2 Полезно
Incomedia
Eric C.
Incomedia

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.

Читать больше
Размещено От Eric C.
Cookie G.
Cookie G.
User
Автор

Weiß jemand wie so ein benutzerdefinierten Code aussehen soll? 

Читать больше
Размещено От Cookie G.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

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.

Читать больше
Размещено От Daniel W.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

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

-----

Читать больше
Размещено От Daniel W.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

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

Читать больше
Размещено От Daniel W.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

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.

Читать больше
Размещено От Daniel W.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

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

-----

Читать больше
Размещено От Daniel W.
Cookie G.
Cookie G.
User
Автор

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

Читать больше
Размещено От Cookie G.
Bernhard K.
Bernhard K.
User

sag mir genau was du willst, ich mach da was...

Читать больше
Размещено От Bernhard K.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца IT

(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

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца IT

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

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.

Читать больше
Размещено От Daniel W.
Cookie G.
Cookie G.
User
Автор

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

Читать больше
Размещено От Cookie G.
Bernhard K.
Bernhard K.
User

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>

Читать больше
Размещено От Bernhard K.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца IT

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

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Cookie G.
Cookie G.
User
Автор

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. 

Читать больше
Размещено От Cookie G.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

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.

Читать больше
Размещено От Daniel W.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

Auf meiner Webseite werden Bilder bei Mouseover so angezeigt, siehe Screenshot

-----

Читать больше
Размещено От Daniel W.
Cookie G.
Cookie G.
User
Автор

Hallo zusammen

Hier mal wie und was ich möchte.

Beim Bild einen Link hinzufügen.

Den Text im Tooltip ausfüllen.

Eistellungen vornehmen.

So sollte es immer aussehen ohne mit der Maus darüber fahren zu müssen.

Also den Tooltip immer sichtbar machen.

Читать больше
Размещено От Cookie G.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

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

Читать больше
Размещено От Daniel W.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца IT
Daniel W.
... ... ...  dass vielleicht KolAsim den passenden JavaScript-Code zur automatischen Textübernahme schreiben könnte. ... ... ... 

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

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

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:

  • die Schaltfläche verwenden, um einen Titel und einen Alternativtext einzufügen, der sowohl für die Barrierefreiheit als auch für die SEO-Optimierung der Seite nützlich ist (siehe Barrierefreiheit von Bildern: die Bedeutung des Alternativtexts);
  • auf die Schaltfläche  klicken und im daraufhin geöffneten Fenster einen kurzen Text (z. B. einen Titel oder eine Bildunterschrift) eingeben;
  • auf die Schaltfläche klicken und den Link festlegen, indem Sie die passende Aktion auswählen.

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

Читать больше
Размещено От Daniel W.
Cookie G.
Cookie G.
User
Автор

Es geht immer nur mit Mousover.

Читать больше
Размещено От Cookie G.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

Es gibt da wohl diese 2 Möglichkeiten:

  1. Die Entwickler von Incomedia könnten zusätzlich die Option "onmouseout" einbauen, damit der Hinweis angezeigt wird, wenn die Maus nicht auf dem Bild ist.
  2. Die JavaScript-Experten könnten per Code das "onmouseover" gegen "onmouseout" auf einer schon bestehenden Seite tauschen, falls das möglich ist.

Mir selber fehlen leider die JavaScript-Kenntnisse.

Читать больше
Размещено От Daniel W.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца IT
Cookie G.
Es geht immer nur mit Mousover.

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

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Cookie G.
Cookie G.
User
Автор

Hallo Daniel 

Nr. 1 wird in diesem Leben nicht mehr passieren ;-)

Читать больше
Размещено От Cookie G.
Cookie G.
Cookie G.
User
Автор

Ciao KolAsim

Es ging schon die ganze Zeit um den Tooltip so wie der Titel schon sagt. 

Читать больше
Размещено От Cookie G.
Andreas S.
Andreas S.
Moderator

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.

Читать больше
Размещено От Andreas S.
Cookie G.
Cookie G.
User
Автор

Hallo KolAsim

Wie würde dann der Script aussehen? 

Читать больше
Размещено От Cookie G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца IT
Cookie G.
Ciao KolAsim Es ging schon die ganze Zeit um den Tooltip so wie der Titel schon sagt. 

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

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца IT
Cookie G.
Hallo KolAsim Wie würde dann der Script aussehen? 

...wenn Sie genau wissen möchten, wie Sie die (schwarzen) Beschreibungen hier sehen, lassen Sie es mich wissen:

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Bernhard K.
Bernhard K.
User

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>

Читать больше
Размещено От Bernhard K.
Cookie G.
Cookie G.
User
Автор

Hallo Bernhart

Bei mir finktioniert es nicht, hast du bei bir mal ausprobiert?

Читать больше
Размещено От Cookie G.
Bernhard K.
Bernhard K.
User

Ich bin erst mo oder di am pc

Читать больше
Размещено От Bernhard K.
Bernhard K.
Bernhard K.
User

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?

  1. Inhalts-Prüfung: Das Skript prüft jetzt aktiv, ob der Tooltip-Container leer ist (tip.innerHTML === "").
  2. Manuelle Text-Injektion: Wenn er leer ist, nimmt das Skript den Text aus dem title-Attribut des Objekts und schreibt ihn eigenhändig in die Tooltip-Box.
  3. Timing: Ich habe die Verzögerung beim Laden auf 1000ms (1 Sekunde) gesetzt, damit WebSite X5 genug Zeit hat, alle Elemente auf der Seite fertig zu initialisieren.

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>

Читать больше
Размещено От Bernhard K.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца IT

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

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪