Deaktivieren Sie den normalen Titeltext, um Tooltip zu ermöglichen. JQuery

Ich versuche, eine Bildunterschrift am unteren Rand meines Headerbilds zu haben. Ich habe den folgenden Code gefunden, um diesen Tooltip zu erstellen, aber er funktioniert nicht für Mobilgeräte.Deaktivieren Sie den normalen Titeltext, um Tooltip zu ermöglichen. JQuery

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <title>Bootstrap Example</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    </head> 
    <body> 

    <script> 
    $(document).ready(function(){ 
     $('[data-toggle="tooltip"]').tooltip({placement:"bottom",delay:{show:0, hide:100000000}}); 
    }); 
    </script> 

    </body> 
    </html>

Ich mag würde die gleiche Beschriftung im normalen Titeltext setzen, sondern nur, dass Titeltext angezeigt, wenn auf einem mobilen Gerät, da die obige Tooltip die Beschriftung liefert, wenn eine Maus gibt.

Ich fand this great code that works ok to display the tooltip on mobile, aber ich kann es nicht perfekt auf der Unterseite der Kopfzeile auf dem Desktop positioniert werden, und es ist nicht immer richtig auf dem Handy verschwunden.

Wie schalte ich den normalen img title-text ab, ohne den JQuery created tooltip auszuschalten?

Quelle

2017-05-26 Conrad

Es funktioniert auf Handy, aber Sie müssen Element lange mit dem Finger halten, nicht nur tippen. Sie können auch einen Tooltip zum Körper beim Berührungsereignis hinzufügen. Aber zuerst Design Tooltip und dann Position von touchevent.clientX und clienY und setzen Sie es auf angehängte Tooltip – Zydnar

Danke für den Rat. Normaler Titeltext wird angezeigt, wenn Sie das Bild lange halten, der 'data-toggle'' Tooltip' jedoch nicht. Wenn dem IMG keine Titelinformationen zugewiesen werden, wird der Dateiname nach einem langen Hold angezeigt. Ich werde mir Ihre anderen Ratschläge ansehen. Danke noch einmal. – Conrad

Dies ist wahrscheinlich nicht die eleganteste, aber es hat für mich funktioniert. Ich bekomme eine data-toggle Tooltip, die in CSS-Code mit dem Klassenselektor .tooltip {} formatiert werden kann und erscheint mit der Maus über große Geräte, und wenn ich auf kleineren Geräten kann ich drücken und halten, um den normalen Titel Text zu erhalten.

Lösung:

In Joomla Ich habe zwei verschiedene Skripte Jumi, man die Daten-Toggle-Tooltips an der Spitze jedes Moduls zu erstellen:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 

<script> 
$(document).ready(function(){ 
    $('[data-toggle="tooltip"]').tooltip({placement:"bottom",delay:{show:0, hide:0}}); 
}); 
</script> 

</body> 
</html>

Und man die regelmäßige auszuschalten Titeltext, wenn die Bildschirmbreite größer als 980 Pixel ist.

<script> 
var mediaquery = window.matchMedia("(min-width: 980px)"); 
if (mediaquery.matches) { 
    $('img').hover(
    function() { 
     $(this).removeAttr('title'); 
    }); 
} 
</script>

dann in jedem Modul, nenne ich, dass die ersten Code mit Jumi <p>{jumi [*4]}</p>. (Das erste Segment ist meine 4. Jumi 'Anwendung'.) Ich erkläre dann den Tooltip und füge das Bild mit dem normalen Titeltext ein. Schließlich, nachdem der Bild- und Titeltext erstellt wurde, rufe ich den zweiten Jumi-Code (Nummer 7 für mich) <p>{jumi [*7]}</p> an, um zu prüfen, ob der Bildschirm groß ist, und wenn ja, lösche den Tooltip.

<p>{jumi [*4]}</p> 
<p title="This is where the text of the the data-toggle tooltip goes" href="#" data-toggle="tooltip"> 
    <img title="This text appears as the regular title text on smaller screens" src="Location_of_the/image_I_display.jpg" alt="Image key words" /> 
</p> 
<p>{jumi [*7]}</p>

Genießen Sie!

Danke an: Fernando Urban's Antwort for the screen size checking if statement, Dave Thomas Antwort to remove the title attribute und Bootstrap for the data-toggle tooltip.

Quelle

2017-06-01 15:58:49 Conrad

Es scheint, als ob '' und '' und '' (sowie einige andere Teile) unnötig waren und einige kleinere Fehler verursachten. Ich habe diese herausgenommen und (http://powermapper.com) sagt, dass es besser ist. – Conrad

Deaktivieren Sie den normalen Titeltext, um Tooltip zu ermöglichen. JQuery

Antwort

Verwandte Themen