jquery - ブラウザの幅を超えたときにツールチップを自動配置

Question

ツールチップの幅がブラウザの表示可能領域を超えると、自動的に再配置され、コンテンツを完全に表示できるようになります。ツールチップは、参照された div に重なってはなりません。ツールチップは、それ自体を再配置するときに幅または高さのサイズを変更しないでください。助けてください。

これが私のサンプルコードです

Answer 1

これで、オブジェクトを自動配置するための独自のプラグインを作成しました。

(function($){
    $.fn.autoposition = function(ref, opt){     
            var _this = $(this);
            var position = function(_tip, _ref, opt){
            var o = $.extend({
                "topallowance":0,
                "leftallowance":0
            }, o || opt);

            var _window = $(window);
            var _widthOfWindow = _window.width();
            var _widthDifferenceFromXaxisOfRef = _widthOfWindow - _ref.offset().left;
            var _xAdjustmentOftipWhenExceedAtLeftSide = ((_tip.outerWidth() > _widthDifferenceFromXaxisOfRef) ? (_tip.outerWidth() - _widthDifferenceFromXaxisOfRef) + o.leftallowance : 0);
            var _leftOfTheTip = _ref.offset().left - _xAdjustmentOftipWhenExceedAtLeftSide;

            var _heightOfWindow = _window.outerHeight();
            var _heightDifferenceFromYaxisOfRef = _heightOfWindow - (_ref.offset().top + _ref.outerHeight());
            var _topOfTheTip = (_tip.outerHeight() > _heightDifferenceFromYaxisOfRef) ? (_ref.offset().top - _tip.outerHeight()) - o.topallowance : (_heightOfWindow - _heightDifferenceFromYaxisOfRef) + o.topallowance;



            _tip
                .css('position', 'absolute')
                .css('top', _topOfTheTip)
                .css('left', _leftOfTheTip)
            ;
        };

        position(_this, ref, opt);
        $(window).bind('resize', function(){
            position(_this, ref, opt);
        });
    };
})(jQuery);

使用するには:

$(".TooltipSample").autoposition($(".theObjectWhereTheTooltipWillShow"));  

それが他の人に役立つことを願っています。

Answer 2

これをやろうとしていますか？

デモを参照してください: http://jsfiddle.net/rathoreahsan/mpDXY/

参考サイト： http ://www.javascriptkit.com/script/script2/htmltooltip.shtml

Answer 3

私は解決策を見つけ、次のようにコードビンで行いました：

1) ヘッダーに jquery-1.2.2.pack.js および htmltooltip.js JavaScript ファイルを含めます。

2) HTML を書きます:

<div id="container">
  <div rel="htmltooltip">
    A
  </div>
  <div rel="htmltooltip">
    B
  </div>
  <div rel="htmltooltip">
    C
  </div>
  <div rel="htmltooltip">
    D
  </div>
  <div rel="htmltooltip">
    E
  </div>
  <div rel="htmltooltip">
    F
  </div>
  <div rel="htmltooltip">
    G
  </div>
  <div rel="htmltooltip">
    H
  </div>
  <div rel="htmltooltip">
    I
  </div>
  <div rel="htmltooltip">
    J
  </div>
  <div rel="htmltooltip">
    K
  </div>
  <div rel="htmltooltip">
    L
  </div>
  <div rel="htmltooltip">
    M
  </div>
  <div rel="htmltooltip">
    N
  </div>
  <div rel="htmltooltip">
    O
  </div>
  <div rel="htmltooltip">
    P
  </div>
  <div rel="htmltooltip">
    Q
  </div>
  <div rel="htmltooltip">
    R
  </div>
  <div rel="htmltooltip">
    S
  </div>
  <div rel="htmltooltip">
    T
  </div>
  <div rel="htmltooltip">
    U
  </div>
  <div rel="htmltooltip">
    V
  </div>
  <div rel="htmltooltip">
    W
  </div>
  <div rel="htmltooltip">
    X
  </div>
  <div rel="htmltooltip">
    Y
  </div>
  <div rel="htmltooltip">
    Z
  </div>
</div>
<div class="htmltooltip">
  Showing Tooltip for Div A
</div>
<div class="htmltooltip">
  Showing Tooltip for Div B
</div>
<div class="htmltooltip">
  Showing Tooltip for Div C
</div>
<div class="htmltooltip">
  Showing Tooltip for Div D
</div>
<div class="htmltooltip">
  Showing Tooltip for Div E
</div>
<div class="htmltooltip">
  Showing Tooltip for Div F
</div>
<div class="htmltooltip">
  Showing Tooltip for Div G
</div>
<div class="htmltooltip">
  Showing Tooltip for Div H
</div>
<div class="htmltooltip">
  Showing Tooltip for Div I
</div>
<div class="htmltooltip">
  Showing Tooltip for Div J
</div>
<div class="htmltooltip">
  Showing Tooltip for Div K
</div>
<div class="htmltooltip">
  Showing Tooltip for Div L
</div>
<div class="htmltooltip">
  Showing Tooltip for Div M
</div>
<div class="htmltooltip">
  Showing Tooltip for Div N
</div>
<div class="htmltooltip">
  Showing Tooltip for Div O
</div>
<div class="htmltooltip">
  Showing Tooltip for Div P
</div>
<div class="htmltooltip">
  Showing Tooltip for Div Q
</div>
<div class="htmltooltip">
  Showing Tooltip for Div R
</div>
<div class="htmltooltip">
  Showing Tooltip for Div S
</div>
<div class="htmltooltip">
  Showing Tooltip for Div T
</div>
<div class="htmltooltip">
  Showing Tooltip for Div U
</div>
<div class="htmltooltip">
  Showing Tooltip for Div V
</div>
<div class="htmltooltip">
  Showing Tooltip for Div W
</div>
<div class="htmltooltip">
  Showing Tooltip for Div X
</div>
<div class="htmltooltip">
  Showing Tooltip for Div Y
</div>
<div class="htmltooltip">
  Showing Tooltip for Div Z
</div>

CSS を書く:

#container div{
  display:inline-block;
  margin-left:5px;
  margin-top:10px;
  width:80px;
  text-align:center;
  border:1px solid #5544d6;
  background-color:#441591;
  color:#cda923;
}
div.htmltooltip{
  position: absolute;
  /*leave this and next 3 values alone*/
  z-index: 1000;
  left: -1000px;
  top: -1000px;
  background: #2255a9;
  border: 7px solid #4488a9;
  box-shadow: 7px 7px 3px #446689;
  color: white;
  padding: 3px;
  text-align:center;

  width: 250px;
  /*width of tooltip*/
}

上記の Html では、各タグに "htmltooltip" で rel 属性を設定し、その順序に従って、クラス "htmltooltip" で関連するツールチップを設定しました。各タグの上にマウスを合わせると、順序ごとに関連するツールチップが表示されるようになりました。

また、ツールチップ div の自動位置をチェックし、ブラウザの幅を超える場合は、ブラウザ領域内にツールチップを表示します。

ここでデモを試してください: http://codebins.com/codes/home/4ldqpbl