jquery - コード内の CSS の変更

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>

score 1 · Accepted Answer

多くの場合、行き詰まったときは、たとえそれが単なる練習であっても、物事を脇に置いて最初からやり直してください。あなたは心をクリアにし、できれば非常にシンプルに始める必要があります。

私は、あなたが望んでいると信じている方法で機能する非常に単純なツールチップ機能を作成しました。デモに必要なものだけを含めていることに注意してください。したがって、の赤いテキストを除いて、marquee完全にスタイルが設定されていないことに注意してください。また、position関数はページの幅とツールチップの幅を考慮する必要があるため、「画面外にスクロール」しないことに注意してください。ただし、演習としてそれを解決させてください。

HTML

this.start()とthis.stop()のmarqueeをmousemoveハンドラに移動しました。さらに、さらに下にネストされた別の要素内ではなく、要素のコンテキスト内にある必要があるため、#tooltip要素をに配置しました。bodyposition: 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 cachingです。要素に繰り返しアクセスする場合は、常にその参照をキャッシュし、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 の変更

1 に答える 1

Related

Reference