0

嗨，我有一个出现在页面底部的工具提示。它应该只出现在鼠标指针之后。它目前在 IE 中工作，但不在 Chrome 中！

这是我的html代码

    <div style="width:958px; margin:auto">
      <div id="diy_content">

         <div> 
            <a class="tip_trigger" href="shttp://www.purplecoffer.com" 
              onMouseOut="MM_swapImgRestore()" 
              onMouseOver="MM_swapImage('purplecoffer','','http://beta.brownbag.ph/diy/mini-banners/purplecoffer.jpg',1)">
            <img src="http://beta.brownbag.ph/diy/mini-  banners/purplecoffer_2.jpg" name="purplecoffer" width= "150px" height = "100px"border="0">
            <span class="tip" style="width: 400px;"><img src="http://beta.brownbag.ph/diy/mini-banners/purplecoffer.jpg" style="float: left; margin-right: 20px;" alt="" />
            Purple Coffer <br/>
            Apparel and Clothing <br/>
            VISIT: www.purplecoffer.com         
            </span>
            </a>
         </div>
     </div>
   </div>

这是我的 CSS

/*--Tooltip Styles--*/
.tip {
    position:absolute;    
    z-index:1000;
    color: #fff;
    background:#1d1d1d;
    padding:10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.tip_trigger .tip { display:none; }

这是我的功能

    $(document).ready(function() {
    //Tooltips
        $('.tip_trigger').each(function() {        
        var tip = $(this).find('.tip');

        $(this).hover(
            function() { tip.appendTo('body');},
            function() { tip.appendTo(this); }
        ).mousemove(function(e) {
            var mousex = e.pageX + 20; //Get X coodrinates
            var mousey = e.pageY + 20; //Get Y coordinates
            var tipWidth = tip.width(); //Find width of tooltip
            var tipHeight = tip.height(); //Find height of tooltip

            //Distance of element from the right edge of viewport
            var tipVisX = $(window).width() - (mousex + tipWidth);
            //Distance of element from the bottom of viewport
            var tipVisY = $(window).height() - (mousey + tipHeight);

            if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
                mousex = e.pageX - tipWidth - 20;
            } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
                mousey = e.pageY - tipHeight - 20;
            } 
            tip.css({  top: mousey, left: mousex  });

        });         
        });
});
4

0 回答 0