Daher muss ich in verschiedenen Situationen einfache alte Tooltips anzeigen. Ich muss mich damit befassen, das Standardverhalten von URL-Links mithilfe eines Onclick-Ereignisses abzubrechen, den Tooltip bei einem Mouseover-Ereignis anzuzeigen und den Tooltip bei einem Mouseout-Ereignis auszublenden. Ich werde bisher meinen gesamten HTML-, CSS- und JavaScript-Code einbinden. Dies muss nur in einer externen JavaScript-Datei erfolgen (d. H. HTML oder CSS können überhaupt nicht geändert werden). Ich kann auch innerHTML nicht verwenden (muss Best Practices für JavaScript verwenden). Ich habe versucht, den Code nach besten Kräften zu schreiben (ich bin wirklich neu in JavaScript). Keine der Funktionen funktioniert derzeit. Ich muss genau 3 Funktionen haben und sie sind im Javascript richtig angeordnet (glaube ich). Ok, genug von meinem Geschwätz hier ist der Code:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tool Tips</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script src="js.js" type="text/javascript"></script>
</head>

<body>
<h1>Tool Tips
</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<a href="http://en.wikipedia.org/wiki/Randy_Rhoads" class="tip">Randy Rhoads
<span> Randy Rhoads blah blah blah</span></a> 
ut augue risus.
<a href="http://en.wikipedia.org/wiki/Ty_Tabor" class="tip">Ty Tabor
<span> Ty Tabor blah blah blah</span></a> 
cras pharetra. 
<a href="http://en.wikipedia.org/wiki/Andy_Timmons" class="tip">Andy Timmons
<span> Andy Timmons blah blah blah</span></a> proin mattis, s auctor. 
<a href="http://en.wikipedia.org/wiki/Joe_Bonamassa" class="tip">Joe Bonamassa
<span> Joe Bonamassa blah blah blah</span></a> Duis ac est quam.</p>
</body>
</html>

CSS

/* styles the anchors that have tooltips*/
.tip {
    font-weight: bold;
    border-bottom: 1px dotted #333;
    cursor: help;
    position: relative;
    color: #600;
}

/* hides all tooltips by default on page load */
.tip span {
    display: none;
/* none of these matter now because the tooltips are hidden */
/* when JS unhides the tooltips, these will already be in place */
    position: absolute;
    top: 1.5em;
    left: 0;
    background: #fff;
    border: 1px solid #333;
    width: 100px;
    padding: 5px;
    color: #333;
}

/* applied by JS to show tips */
.tip span.showTip {
    display: block;
}

/* applied by JS to hide tips */
.tip span.hideTip {
    display: none;
}

JavaScript

// *** Use JavaScript best practices ***
// *** This means that the HTML and the CSS are not to be edited at all ***
// *** No <script> tags are to be added to the HTML ***
// *** No inline JavaScript is to be added to the HTML ***
// *** The CSS is to be left alone, no changes are allowed ***

// Step 1: Create the ONLOAD event so that the function prepareTips() runs once the page has finished loading
window.onload = prepareTips;

// Step 2: Declare the prepareTips() function
function prepareTips() {

    // Step 3: Scan the document looking for all anchor tags
    var arrAnchors = document.getElementsByTagName('a');

    // Step 4: Handle browsers that DON'T SUPPORT EITHER CSS OR JAVASCRIPT. 
    // *** If this is the case, the tooltips are hidden and the links open to the Wikipedia pages ***
    if(!document.getElementsByTagName) return false;

    //*** If the browser supports both CSS and JavaScript, the prepareTips() function does the following: ***

    // Step 5: Loop thru all the anchor tags and assigning the events to be handled for all of the links/tooltips
    for (var i=0; i<arrAnchors.length; i++) {

        // Step 6: Bind the showTip() function to the <span> tags' MOUSEOVER event
         arrAnchors.onmouseover = showTip;

        // Step 7: Bind the hideTip() function to the <span> tags' MOUSEOUT event
         arrAnchors.onmouseout = hideTip;

        // Step 8: Bind the showTip() function to the onclick event
        arrAnchors.onclick = showTip;
     }          
}

// *** NOTE: Tooltip triggers are anchor tags and contain the class "tip" ***
// *** NOTE: The .tip class is applied without the use of JavaScript ***
// *** NOTE: The .tip span class formats the tooltip spans but hides them by default.  This is applied without JavaScript ***

// Step 9: Create a separate function called showtip()
function showTip() {

    // Step 10: When an onclick event for a link happens, cancel the default behavior of the link.
    // *** The browser does not go to the URL value contained in the HREF ***
    // *** So the links do nothing when clicked (i.e. return false) instead of going to the Wikipedia page of the guitar player ***
      var arrLinks = document.getElementsByTagName('a');

          for (var i=0; i<arrLinks.length; i++) {
            arrLinks[i].onlick = function() {
            return false;
        }

    // Step 11: The showtip() function changes the anchor class to ".tip span.showTip" located in the CSS file 
    // *** The .tip span.showTip class in the CSS file simply overrides the display property, showing the tooltip span as a block element ***
    // *** This is to be applied using JavaScript (no other properties of the .tip span.showTip will be changed) ***
          arrLinks[i].className === 'showTip';

    // Step 12: Show the associated tooltip when an onmouseover event for a link occurs
    // *** The tooltip that is displayed is the text between the <span>Tooltip text here</span> tags ***
    // *** For example: The tooltip to be displayed when the mouse is hovered over the Randy Rhoads link is: "Randy Rhoads blah blah blah" ***
    // *** The <span> is a child of the anchor (<a>) tags ***
    // *** This means they can be accessed in CSS with a descendant selector .tip span ***
          var tooltip = arrLinks[i].setAttribute('title', arrLinks[i].childName['span'].nodeValue);
     }
}

// Step 13: Create a separate function called hideTip()
function hideTip() {

    // Step 14: The showtip() function changes the anchor class to ".tip span.hideTip" located in the CSS file 
    // *** The .tip span.hideTip class in the CSS file sets the display property back to none, hiding the tooltip ***
      var hideTips = document.getElementsByTagName('a');

    // Step 15: Hide the associated tooltip when the mouseout event for the links occurs.
    // *** The <span> is a child of the anchor (<a>) tags ***
    // *** This means they can be accessed in CSS with a descendant selector .tip span ***
      hideTips[i].className === 'hideTip';
}
0
HoppedUpDesigns 7 Okt. 2012 im 08:45

3 Antworten

Beste Antwort

Ein kurzer Blick deutet darauf hin, dass Sie return false haben, wenn ein Browser JS / CSS nicht verwenden kann, aber return true nicht, wenn dies der Fall ist. Dies führt zu dem Problem, das Sie haben. Ich vermute, Sie sollten etwas tun (und nicht nur return false), wenn es nicht mit JS / CSS umgehen kann, aber Sie haben versucht, als Platzhalter zurückzukehren.

Randnotiz: Wenn ein Browser JS nicht unterstützt ... wie soll er JS ausführen, um festzustellen, ob er JS unterstützt oder nicht?

0
Rhyono 7 Okt. 2012 im 05:37

Warum verwenden Sie "CSS" und "Javascript", um Tooltip anzuzeigen und auszublenden? Es ist sehr einfach, Tooltip auf URL in HTML anzuzeigen. Ändern Sie einfach einige Zeilen in Ihrem Code, den ich unten geschrieben habe. Sie müssen nicht CSS und Javascript verwenden.

<a href="http://en.wikipedia.org/wiki/Randy_Rhoads" title="go to randy rhoad wikipedia  page">Randy Rhoads
<a href="http://en.wikipedia.org/wiki/Ty_Tabor" title="go to Tv Tabor wikipedia page">Ty Tabor
<a href="http://en.wikipedia.org/wiki/Andy_Timmons" title="go to Andy Timmons wikipedia page">Andy Timmons
<a href="http://en.wikipedia.org/wiki/Joe_Bonamassa" title="go to Joe Bonamassa wikipedia page">Joe Bonamassa
0
vinus patel 7 Okt. 2012 im 15:08

Ich gehe davon aus, dass Sie davon sprechen, Text auf Tooltip aus Span-Text zu bringen, und dass Sie den Text nicht in Span bekommen, um ihn auf Tooltip des Ankertags anzuzeigen. Sie erhalten keinen Span-Text in die Titelleiste und haben die Funktion in Ihrer Onload-Funktion nicht einmal richtig erwähnt. Sie erhalten eine bessere Vorstellung von Ihren kleinen Fehlern und Korrekturen im folgenden Code. Kommentieren Sie Ihren js-Code und geben Sie diesen js-Code ein.

// *** Use JavaScript best practices ***
// *** This means that the HTML and the CSS are not to be edited at all ***
// *** No <script> tags are to be added to the HTML ***
// *** No inline JavaScript is to be added to the HTML ***
// *** The CSS is to be left alone, no changes are allowed ***

// Step 1: Create the ONLOAD event so that the function prepareTips() runs once the page has finished loading
window.onload = prepareTips;

// Step 2: Declare the prepareTips() function
function prepareTips() {

    // Step 3: Scan the document looking for all anchor tags
    var arrAnchors = document.getElementsByTagName('a');

    // Step 4: Handle browsers that DON'T SUPPORT EITHER CSS OR JAVASCRIPT. 
    // *** If this is the case, the tooltips are hidden and the links open to the Wikipedia pages ***
    if(!document.getElementsByTagName) return false;

    //*** If the browser supports both CSS and JavaScript, the prepareTips() function does the following: ***

    // Step 5: Loop thru all the anchor tags and assigning the events to be handled for all of the links/tooltips
    for (var i=0; i<arrAnchors.length; i++) {

        // Step 6: Bind the showTip() function to the <span> tags' MOUSEOVER event
         arrAnchors.onmouseover = showTip();

        // Step 7: Bind the hideTip() function to the <span> tags' MOUSEOUT event
         arrAnchors.onmouseout = hideTip();

        // Step 8: Bind the showTip() function to the onclick event
        arrAnchors.onclick = showTip();
     }          
}

// *** NOTE: Tooltip triggers are anchor tags and contain the class "tip" ***
// *** NOTE: The .tip class is applied without the use of JavaScript ***
// *** NOTE: The .tip span class formats the tooltip spans but hides them by default.  This is applied without JavaScript ***

// Step 9: Create a separate function called showtip()
function showTip() {

    // Step 10: When an onclick event for a link happens, cancel the default behavior of the link.
    // *** The browser does not go to the URL value contained in the HREF ***
    // *** So the links do nothing when clicked (i.e. return false) instead of going to the Wikipedia page of the guitar player ***
      var arrLinks = document.getElementsByTagName('a');

          for (var i=0; i<arrLinks.length; i++) {
            arrLinks[i].onlick = function() {
            return false;
        }

    // Step 11: The showtip() function changes the anchor class to ".tip span.showTip" located in the CSS file 
    // *** The .tip span.showTip class in the CSS file simply overrides the display property, showing the tooltip span as a block element ***
    // *** This is to be applied using JavaScript (no other properties of the .tip span.showTip will be changed) ***
          arrLinks[i].className === 'showTip';

    // Step 12: Show the associated tooltip when an onmouseover event for a link occurs
    // *** The tooltip that is displayed is the text between the <span>Tooltip text here</span> tags ***
    // *** For example: The tooltip to be displayed when the mouse is hovered over the Randy Rhoads link is: "Randy Rhoads blah blah blah" ***
    // *** The <span> is a child of the anchor (<a>) tags ***
    // *** This means they can be accessed in CSS with a descendant selector .tip span ***
          arrLinks[i].setAttribute('title', arrLinks[i].childNodes[1].innerHTML);
     }
}

// Step 13: Create a separate function called hideTip()
function hideTip() {

    // Step 14: The showtip() function changes the anchor class to ".tip span.hideTip" located in the CSS file 
    // *** The .tip span.hideTip class in the CSS file sets the display property back to none, hiding the tooltip ***
      var hideTips = document.getElementsByTagName('a');

    // Step 15: Hide the associated tooltip when the mouseout event for the links occurs.
    // *** The <span> is a child of the anchor (<a>) tags ***
    // *** This means they can be accessed in CSS with a descendant selector .tip span ***
      hideTips[i].className === 'hideTip';
0
Dhaval 7 Okt. 2012 im 05:40