0

很抱歉，这听起来有点愚蠢，但是没有其他人可以解决我的问题，这就是我在这里问的原因。

我编写了以下代码，当我将鼠标悬停在移动文本框上时，它会显示工具提示。但目前的问题是工具提示出现在左侧，相对低于位置。但是我希望它有所不同，工具提示应该出现在我悬停文本的正上方。有人可以修改我的 CSS 吗？

<!-- CSS Part Start -->
<style type="text/css">
#NT_copy {
background-color: #333333;
color: #FFFFFF;
font-weight: bold;
font-size: 13px;
font-family: "Trebuchet MS";
width: 300px;
left: 10px;
top: 20px;
padding: 4px;
position: relative;
text-align: left;
z-index: 20;
-moz-border-radius: 0 10px 10px 10px;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=87);
-moz-opacity: .87;
-khtml-opacity: .87;
opacity: .87;
}
</style>
<!-- CSS Part End -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.fn.tooltip= function(options) {
  this.each(function(){
    var settings = {
      tooltipcontentclass:"searchTipcontent",
      width:200,
      position:"absolute",
      zindex:100 
    };
    if(options) {
      jQuery.extend(settings, options);
    }
    jQuery(this).children("."+settings.tooltipcontentclass).hide();
    jQuery(this).hover(function() {
      var de = document.documentElement;
      var w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
      var hasArea = w - jQuery.fn.getAbsoluteLeftObject(this);
      var clickElementy = jQuery.fn.getAbsoluteTopObject(this) - 3; //set y position
      var title="&nbsp;";
      jQuery("body").append("<div id='NT'><div id='NT_copy'><div >"+jQuery(this).children("."+settings.tooltipcontentclass).html()+"</div></div></div>");//right side
      var arrowOffset =  this.offsetWidth + 11;
      var clickElementx = jQuery.fn.getAbsoluteLeftObject(this) + arrowOffset;
      jQuery('#NT').css({left: clickElementx+"px", top: clickElementy+"px"});
      jQuery('#NT').css({width: settings.width+"px"});
      jQuery('#NT').css({position: settings.postion});
      jQuery('#NT').css("z-index",settings.zindex);
      jQuery('#NT').show();
    } ,
    function() {
      jQuery("#NT").remove();
  })

  });
}
jQuery.fn.getAbsoluteLeftObject=function(o) {
  // Get an object left position from the upper left viewport corner
  oLeft = o.offsetLeft            // Get left position from the parent object
  while(o.offsetParent!=null) {   // Parse the parent hierarchy up to the document element
    oParent = o.offsetParent    // Get parent object reference
    oLeft += oParent.offsetLeft // Add parent left position
    o = oParent
  }
  return oLeft
}

jQuery.fn.getAbsoluteTopObject=function (o) {
  // Get an object top position from the upper left viewport corner
  oTop = o.offsetTop            // Get top position from the parent object
  while(o.offsetParent!=null) { // Parse the parent hierarchy up to the document element
    oParent = o.offsetParent  // Get parent object reference
    oTop += oParent.offsetTop // Add parent top position
    o = oParent
  }
  return oTop
}
</script>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<div id="fixedfooter">
<marquee class="smooth_m" behavior="scroll" direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3">
<div id="demo">
    <span style="color: #ff0000;" class="formInfo">
    <div class="mycontent" style="color: #000000;display:none;">
        test Successful for HTML Tooltip on marquee
    </div>
    <a href="#"></a>Testing HTML Tooltip on marquee using jQuery and css</span>
</div>
</marquee>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $(".formInfo").tooltip({
        tooltipcontentclass: "mycontent"
    })
});;
</script>
4

1 回答 1

1

通常，当您遇到困难时，将事情搁置一旁并重新开始，即使这只是一种练习。你必须理清思路，最好从简单的开始。

我创建了一个非常简单的工具提示功能，它可以按照我相信您想要的方式工作。请注意，我只包含了演示所需的内容，因此请注意，除了 中的红色文本之外marquee，它完全没有样式。另请注意，该position函数需要考虑页面宽度和工具提示的宽度，因此它不会“滚动到屏幕外”。不过，我会让你把它当作练习来解决。

HTML

我已经将this.start()and移到了this.stop()处理程序中。此外，我将元素放在 中，因为它需要位于元素的上下文中，而不是嵌套在更下方的另一个元素中。marqueemousemove#tooltipbodyposition: absolutebody

<div id="fixedfooter">
    <marquee behavior="scroll" direction="left" scrollamount="3">
        <span id="marquee-text">
            Testing HTML Tooltip on marquee using jQuery and css
        </span>
    </marquee>
</div>
<div id="tooltip">
    Successful for HTML Tooltip on marquee
</div>

CSS

#fixedfooter {
    position: absolute;
    top: 50%;
    width: 100%;
    color: #ff0000;
}
#marquee-text {
    cursor: pointer;
}
#tooltip {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}

Javascript

和它下面var $tooltip = $('#tooltip')的行是 jQuery缓存。如果您重复访问一个元素，请始终尝试缓存它的引用，而不是一遍又一遍地从 jQuery 选择器中调用它；这是一个很大的性能问题。

jQuery(document).ready(function($){
    var $tooltip = $('#tooltip'),
        $marquee = $('#marquee-text');

    var show = function(e){
        $marquee.parent('marquee')[0].stop();
        position.call(this, e);
        $tooltip.show();
    };

    var hide = function(e){
        $marquee.parent('marquee')[0].start();
        $tooltip.hide();
    };

    var position = function(e){
        $tooltip.css({top: e.pageY + 20, left: e.pageX + 20});
    };

    $marquee
        .hover(show, hide)
        .mousemove(position);
});

http://jsfiddle.net/6jTd6/

于 2012-05-27T15:55:33.167 回答