Question

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

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

Answer 1

通常，当你遇到困难时，将事情放在一边并重新开始，即使它只是作为一种练习。你必须清醒自己，最好简单地开始。

我创建了一个非常简单的工具提示功能，它的工作方式与我认为你想要它的方式相同。请注意，我只包含了演示所需的内容，因此请注意除marquee中的红色文本外，它完全没有问题。另请注意，position函数需要考虑页面的宽度和工具提示的宽度，因此它不会“滚动屏幕外”。不过，我会让你把它作为一种练习。

<强> HTML

我已将this.start()的{{1}}和this.stop()移至marquee处理程序。另外，我已将mousemove元素放在#tooltip中，因为它必须在body元素的上下文中为position: absolute，而不是在另一个嵌套的元素中

body

<强> CSS

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

<强>的Javascript

#fixedfooter { position: absolute; top: 50%; width: 100%; color: #ff0000; } #marquee-text { cursor: pointer; } #tooltip { display: none; position: absolute; top: 0; left: 0; }及其下面的行是jQuery 缓存。如果你反复访问一个元素，总是尝试缓存它的引用，而不是一遍又一遍地从jQuery选择器中调用它;这是一个很大的性能问题。

var $tooltip = $('#tooltip')

http://jsfiddle.net/6jTd6/

代码中的CSS修改

1 个答案: