所以我必须在各种情况下显示普通的 ole 工具提示。我必须处理使用 onclick 事件取消 URL 链接的默认行为，在 mouseover 事件上显示工具提示并在 mouseout 事件上隐藏工具提示。到目前为止，我将包含我所有的 HTML、CSS 和 JavaScript 代码。这只能在外部 JavaScript 文件中完成（即根本无法更改 HTML 或 CSS）。我也不能使用 innerHTML（必须使用 JavaScript 最佳实践）。我试图尽我所能编写代码（我对 JavaScript 真的很陌生）。目前这些功能都不起作用。我必须有 3 个函数，并且它们在 Javascript 中以正确的方式（我认为）布局。好的，我的唠叨够多了，下面是代码：
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';
}