Suche nach Tooltip-Script

S

sanuj

New member
Hallo zusammen
Ich suche ein Script zur Erstellung von Tooltips (mit Bild statt Text) auf einer Website. Mit dem wesentlichen Kriterium, dass die Tooltips auf Geräten mit Touchscreens - also Smartphones, Tablets etc - nicht erscheinen. Gibt es so etwas? Mit bestem Dank für Tipps
 
Oops, damit habe ich nicht gerechnet: keinerlei Antwort. Ich habe mit der Auskunft gerechnet, dass es sowas nicht gibt, aber so? Bin ich am falschen Ort? Ist die Frage unklar formuliert? Fehlen wesentliche Infos?
 
klar geht das, schau hier
HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Tooltip Beispiel</title>
</head>
<body>
    <div class="tooltip-container">
        <div class="tooltip" id="tooltip">Ihr Tooltip-Inhalt mit Bild hier</div>
        <button id="showTooltip">Tooltip anzeigen</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

css
CSS: 
.tooltip-container {
    position: relative;
    display: inline-block;
}

.tooltip {
    display: none;
    position: absolute;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

button:hover + .tooltip {
    display: block;
}

Javascript: 
// Überprüfen, ob das Gerät einen Touchscreen hat
function isTouchDevice() {
    return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
}

const showTooltipButton = document.getElementById('showTooltip');
const tooltip = document.getElementById('tooltip');

// Tooltip nur anzeigen, wenn es kein Touchscreen-Gerät ist
if (!isTouchDevice()) {
    showTooltipButton.style.display = 'inline-block';
} else {
    showTooltipButton.style.display = 'none';
}

zusammenbauen tust es bitte selber.
 
Hallo mo
Besten Dank für Deine Antwort, aber da fehlte wohl wirklich eine wesentliche Information meinerseits: Beim Tooltip es soll sich
 
um einen Hover-Effekt über einem Link handeln. Der Link verweist auf eine Seite mit Fotos, der Tooltip sollte eines der Fotos als Vorschaubild zeigen. Das Vorschaubild sollte also ohne Klicken beim Überfahren des Links mit dem Mauszeiger neben demselben erscheinen.
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Tooltip Beispiel</title>
</head>
<body>
<a href="ziel-seite.html" class="tooltip-container">
Linktext
<span class="tooltip">
<img src="vorschaubild.jpg" alt="Vorschaubild">
</span>
</a>
</body>
</html>



.tooltip-container {
position: relative;
text-decoration: none;
}

.tooltip {
display: none;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tooltip img {
max-width: 100px; /* Passen Sie die Größe des Vorschaubilds nach Bedarf an */
}

.tooltip-container:hover .tooltip {
display: block;
}
 
Hallo mo
Ja, mit diesen css-Lösungen hatte ich es auch schon versucht. Das Problem dabei: Auf Touchscreens muss man dann zweimal auf den Link tippen, beim ersten mal erscheint das Vorschaubild (was es ja eben nicht soll), beim zweiten mal geht es zur verlinkten seite. Ausprobiert mit iPhone 6s. Nur kommen vermutlich die wenigsten darauf, dass man zweimal tippen muss und halten dann das Vorschaubild für das Linkziel.
 
Tja, und so kam es zu meiner Anfrage hier. Ich habe zwar keine Ahnung von Javascript, aber zumindest schonmal davon gehört, dass man damit überprüfen kann, ob ein Gerät einen Touchscreen hat - was Du in Deinem ersten Script ja auch getan hast. Meine Hoffnung war also, dass sich der Tooltip über diese Abfrage beim Vorhandensein eines Touchscreens dort irgendwie verhindern lasse. Das scheint aber, wenn ich Dich richtig verstehe, nicht der Fall zu sein.
 
Nur? Leider weiss ich nicht, wie man die Scripts kombinieren könnte, damit es klappt. Vielleicht weiss es eine:r der Spezialist:innen hier?
 
hier brauchste nicht gendern, alles gerne so, wie´s richtig ist.

die spezialisten: klar könnten die, aber am besten fängst du mal an, was zu bauen und zeigst uns das. dann lernst du auch was dabei.
 
Was das Gendern betrifft: mach ich doch gern. Und ansonsten: Leider kann ich, wie gesagt, kein Javascript und werde es - mit bald 70 Jahren - auch nicht mehr lernen. Daher meine einfache Frage, ob mir jemand in dem Fall helfen könnte. Wenn nicht, aus welchen Gründen auch immer, ist das ja auch kein Beinbruch. Mit besten Grüssen
 
probier mal so:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Tooltip Beispiel</title>
</head>
<body>
<a href="ziel-seite.html" class="tooltip-container">
Linktext
<span class="tooltip">
<img src="vorschaubild.jpg" alt="Vorschaubild">
</span>
</a>
<script src="script.js"></script>
</body>
</html>


CSS
.tooltip-container {
position: relative;
text-decoration: none;
}

.tooltip {
display: none;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tooltip img {
max-width: 100px; /* Passen Sie die Größe des Vorschaubilds nach Bedarf an */
}

.tooltip-container.hovered .tooltip {
display: block;
}


JS
// Überprüfen, ob das Gerät einen Touchscreen hat
function isTouchDevice() {
return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
}

const tooltipContainer = document.querySelector('.tooltip-container');

// Nur auf Geräten ohne Touchscreen den Hover-Effekt hinzufügen
if (!isTouchDevice()) {
tooltipContainer.addEventListener('mouseenter', () => {
tooltipContainer.classList.add('hovered');
});

tooltipContainer.addEventListener('mouseleave', () => {
tooltipContainer.classList.remove('hovered');
});
}
 
Hallo mo
Herzlichen Dank. Jetzt klappt es halbwegs: zwar erscheint das Vorschaubild auf dem Touchscreen manchmal noch kurz, aber man muss wenigstens nicht zweimal tippen, um zur Folgeseite zu gelangen. Das genügt mir völlig.
 
hi
gerne!
probier mal noch das hier

JS
// Überprüfen, ob das Gerät einen Touchscreen hat
function isTouchDevice() {
return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
}

const tooltipContainer = document.querySelector('.tooltip-container');

// Nur auf Geräten ohne Touchscreen den Hover-Effekt hinzufügen
if (!isTouchDevice()) {
let timeoutId;

tooltipContainer.addEventListener('mouseenter', () => {
clearTimeout(timeoutId);
tooltipContainer.classList.add('hovered');
});

tooltipContainer.addEventListener('mouseleave', () => {
timeoutId = setTimeout(() => {
tooltipContainer.classList.remove('hovered');
}, 100); // Hier können Sie die Verzögerungszeit anpassen
});
}
 
Hallo mo
Ich glaube, ich gebe es langsam auf: nach nochmaligem Test funktioniert weder dein Script von Mittwoch (das vorletzte), noch das gestrige (das letzte). Es scheint also wirklich nicht möglich zu sein. Trotzdem besten Dank für Deine Bemühungen.
 
  • Like
Reaktionen: mo
mo schrieb:
probier mal so:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Tooltip Beispiel</title>
</head>
<body>
<a href="ziel-seite.html" class="tooltip-container">
Linktext
<span class="tooltip">
<img src="vorschaubild.jpg" alt="Vorschaubild">
</span>
</a>
<script src="script.js"></script>
</body>
</html>


CSS
.tooltip-container {
position: relative;
text-decoration: none;
}

.tooltip {
display: none;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tooltip img {
max-width: 100px; /* Passen Sie die Größe des Vorschaubilds nach Bedarf an */
}

.tooltip-container.hovered .tooltip {
display: block;
}


JS
// Überprüfen, ob das Gerät einen Touchscreen hat
function isTouchDevice() {
return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
}

const tooltipContainer = document.querySelector('.tooltip-container');

// Nur auf Geräten ohne Touchscreen den Hover-Effekt hinzufügen
if (!isTouchDevice()) {
tooltipContainer.addEventListener('mouseenter', () => {
tooltipContainer.classList.add('hovered');
});

tooltipContainer.addEventListener('mouseleave', () => {
tooltipContainer.classList.remove('hovered');
});
}
Zum Vergrößern anklicken....
Großartige Beschreibung;)
 
Zuletzt bearbeitet von einem Moderator:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben