我想要做的是,当用户指向网站上的五个按钮图片之一时,它应该为他们提供一个带有其定义的工具提示。 它在Chrome Ver 46.0中运行良好,但在IE11中没有。 当我运行IE Developer工具时。它给出了错误SCRIPT5009:'tooltip'未定义。行:26,专栏:26。
HTML:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<title>Build Menu with Tooltip</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="themes/3/tooltip.js" type="text/javascript"></script>
<link href="themes/3/tooltip.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {padding:0;margin:0; font:normal 12px Arial; background:none no-repeat center 93px;}
.main {margin: 0 auto; width: 4000px; color:#AAA;}
.main a {color:#000000;}
#vWrapper {margin-top:0px; padding:6px; width:200px; opacity:1.0; filter:alpha(opacity=50); background:#fff;}
#vWrapper a {color:#ABCDEF; text-decoration:none; display:block; padding:6px 20px; background:#ffffff;}
#vWrapper a:hover {color:#000; text-decoration:underline; background:#fff;}
.column { float:right; padding:0 20px;}
</style>
</head>
<body>
<div class="main">
<div id="vWrapper">
<a href="#" onmouseover="tooltip.pop(this, '#sub1', {position:1, offsetX:-20, effect:'slide'})"><img src="src/1.png" style="width:200px;height:100px;" alt=""> </a>
<a href="#" onmouseover="tooltip.pop(this, '#sub2', {position:1, offsetX:-20, effect:'slide'})"><img src="src/2.png" style="width:200px;height:100px;" alt=""> </a>
<a href="#" onmouseover="tooltip.pop(this, '#sub3', {position:1, offsetX:-20, effect:'slide'})"><img src="src/3.png" style="width:200px;height:100px;" alt=""> </a>
<a href="#" onmouseover="tooltip.pop(this, '#sub4', {position:1, offsetX:-20, effect:'slide'})"><img src="src/4.png" style="width:200px;height:100px;" alt=""> </a>
<a href="#" onmouseover="tooltip.pop(this, '#sub5', {position:1, offsetX:-20, effect:'slide'})"><img src="src/5.png" style="width:200px;height:100px;" alt=""> </a>
</div>
</div>
<!--Menu Data-->
<div style="display:none;">
<div id="sub1">
<div class="column">
<p align="justify">Conduct proactive, routine quality management functions to mitigate risk exposure and liability in the Services solution design, account operations & project delivery, through quality reviews, early warning triggers, metrics, account/project compliance & performance reporting.</p>
<p align="justify">Drive continuous improvement and corrective actions for systemic root causes.</p>
</div>
</div>
<div id="sub2">
<div class="column">
<p align="justify">Provide account operations, PMO and project delivery consulting services via senior-level leveraged subject matter experts, with extensive Services experience across multiple industries and lines of business (LOBs).
</p><br />
</div>
</div>
<div id="sub3">
<div class="column">
<p align="justify">Establish, (optimize/streamline/simplify) and drive delivery governance, proactive early warning intervention, and remediation on challenged accounts and PCC3 projects, promoting accountability and consistency across all Services delivery teams.
</p><br />
</div>
</div>
<div id="sub4">
<div class="column">
<p align="justify">Collaboratively develop, implement, drive compliance & adoption of the Dell Services Account Lifecycle Mgmt. (ALM) frameworks –Account Start-Up, Account Mgmt., Acct Shutdown (ASUM, AMM, ASDM) and Patented PM3 standard frameworks, best practices & supporting policies, including Contract Compliance Policy, throughout the account lifecycle.
</p><br />
</div>
</div>
<div id="sub5">
<div class="column">
<p align="justify">Establish Integrated Early Warning Reporting, enabling delivery governance for account operations and project delivery Performance & Compliance. Provide business “ownership” / requirements & collaborate on strategy for standardized, Services-wide systems/tools that enable account management, project delivery and governance functions. </p>
<p align="justify">Expand the engagement of the Services delivery community with passion & optimism through broad-based, global communications, CoPs and Knowledge Mgmt. solutions, which foster a sense of ownership, enthusiasm and a collaborative culture across Services.</p>
</div>
</div>
</div>
</body>
</html>
CSS:
/*For tooltip target element that has set class="tooltip" */
.tooltip {text-decoration: none; border-bottom:1px dotted #36c;color: #36c; outline: none; }
/*For tooltip box*/
div#mcTooltip
{
line-height:20px;
border-width: 2px;
color:#000000;
border-color:#000000;
padding:10px;
font-size: 14px;
font-family: Museo for Dell, Museo Sans for Dell ;
border-radius:9px;
background-color:#000000;
background-image:url(bg_ptn.png);
}
div#mcTooltip, div#mcttCo b {
box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
/* For hyperlink within tooltip */
div#mcTooltip a { color:#fff; }
/*Close button. Available when sticky or overlay has been set to true, or is on touch-enabled devices. */
div#mcttCloseButton
{
width:18px;
height:18px;
margin-right:4px;
margin-top:4px;
/*background:black;*/
}
/*Close button X symbol*/
div#mcttCloseButton:after {
font:normal 38px/18px Museo for Dell, Museo Sans for Dell;
color:#999;
top:0;left:-2px;
}
/*Give the close button a bigger size on smaller devices*/
@media only screen and (max-width: 736px) {
div#mcttCloseButton {
width:28px;
height:28px;
}
div#mcttCloseButton:after {
font-size:48px;
line-height:28px;
}
}
/* Useful when overlay has been set to true or 1 in JS */
div#mcOverlay
{
background-color: rgba(0,0,0,0.5);
display:none;top:0;left:0;width:100%;height: 100%;overflow:visible;z-index:4;
}
/*The settings below should remain unchanged*/
div#mcTooltipWrapper {position:absolute;visibility:hidden;overflow:visible;z-index:9999999999;top:-2000px;}
div#mcTooltip {float:left;border-style:solid;position:absolute;overflow:hidden;}
div.mcTooltipInner {float:left;position:relative;width:auto;height:auto;}
div#mcttCo, div#mcttCo b{position:absolute;overflow:hidden;}
/*compatible with bootstrap*/
div#mcTooltip, div#mcTooltip div {box-sizing:content-box;}