WebSite X5Help Center

 
Cookie G.
Cookie G.
User

Tooltip immer sichtbar anzeigen  de

Author: Cookie G.
Visited 606, Followers 1, Shared 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 

Posted on the
38 ANSWERS - 2 USEFUL
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.

Read more
Posted on the from Eric C.
Cookie G.
Cookie G.
User
Author

Weiß jemand wie so ein benutzerdefinierten Code aussehen soll? 

Read more
Posted on the from Cookie G.
Daniel W.
Daniel W.
User
Best User of the month DEBest User of the month 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.

Read more
Posted on the from Daniel W.
Daniel W.
Daniel W.
User
Best User of the month DEBest User of the month 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 -----

-----

Read more
Posted on the from Daniel W.
Daniel W.
Daniel W.
User
Best User of the month DEBest User of the month 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 -----

Read more
Posted on the from Daniel W.
Daniel W.
Daniel W.
User
Best User of the month DEBest User of the month 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.

Read more
Posted on the from Daniel W.
Daniel W.
Daniel W.
User
Best User of the month DEBest User of the month 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

-----

Read more
Posted on the from Daniel W.
Cookie G.
Cookie G.
User
Author

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

Read more
Posted on the from Cookie G.
Bernhard K.
Bernhard K.
User

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

Read more
Posted on the from Bernhard K.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month 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

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Daniel W.
Daniel W.
User
Best User of the month DEBest User of the month 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.

Read more
Posted on the from Daniel W.
Cookie G.
Cookie G.
User
Author

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

Read more
Posted on the from 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>

Read more
Posted on the from Bernhard K.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month 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...

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Cookie G.
Cookie G.
User
Author

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. 

Read more
Posted on the from Cookie G.
Daniel W.
Daniel W.
User
Best User of the month DEBest User of the month 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.

Read more
Posted on the from Daniel W.
Daniel W.
Daniel W.
User
Best User of the month DEBest User of the month EN

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

-----

Read more
Posted on the from Daniel W.
Cookie G.
Cookie G.
User
Author

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.

Read more
Posted on the from Cookie G.
Daniel W.
Daniel W.
User
Best User of the month DEBest User of the month 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 -----

Read more
Posted on the from Daniel W.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month 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

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Daniel W.
Daniel W.
User
Best User of the month DEBest User of the month 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.

Read more
Posted on the from Daniel W.
Cookie G.
Cookie G.
User
Author

Es geht immer nur mit Mousover.

Read more
Posted on the from Cookie G.
Daniel W.
Daniel W.
User
Best User of the month DEBest User of the month 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.

Read more
Posted on the from Daniel W.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month 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:

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Cookie G.
Cookie G.
User
Author

Hallo Daniel 

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

Read more
Posted on the from Cookie G.
Cookie G.
Cookie G.
User
Author

Ciao KolAsim

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

Read more
Posted on the from 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.

Read more
Posted on the from Andreas S.
Cookie G.
Cookie G.
User
Author

Hallo KolAsim

Wie würde dann der Script aussehen? 

Read more
Posted on the from Cookie G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month 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.

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month 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:

.

Read more
Posted on the from  ‪ 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>

Read more
Posted on the from Bernhard K.
Cookie G.
Cookie G.
User
Author

Hallo Bernhart

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

Read more
Posted on the from Cookie G.
Bernhard K.
Bernhard K.
User

Ich bin erst mo oder di am pc

Read more
Posted on the from 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>

Read more
Posted on the from Bernhard K.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month 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

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪