工具提示弹出窗口无法在IE中工作

时间:2015-10-28 08:44:25

标签: javascript html css tooltip

我想要做的是,当用户指向网站上的五个按钮图片之一时,它应该为他们提供一个带有其定义的工具提示。 它在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;}

0 个答案:

没有答案