jquery - 代码中的CSS修改

很抱歉，这听起来有点愚蠢，但是没有其他人可以解决我的查询，这就是为什么我在这里询问。

我编写了以下代码，当我将鼠标悬停在移动文本选取框上时会显示工具提示。但是目前的问题是，工具提示的左侧位置相对较低。但是我希望它与众不同，例如，工具提示应该出现在我将文本悬停的位置的正上方。有人可以修改我的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>

最佳答案

通常，当您陷入困境时，请将其放在一边，然后重新开始，即使只是作为练习。您必须清醒头脑，并且最好非常简单地开始。

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

的HTML

我已经将this.start()的this.stop()和marquee移到了mousemove处理程序中。另外，我将#tooltip元素放在body中，因为它需要在position: absolute元素的上下文中为body，而不是在嵌套的另一个元素内。

<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;
}

Java脚本

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/

关于jquery - 代码中的CSS修改，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10771460/