Geek asks and answers

Tooltip for auto position when it exceeds browser width

What I want to do is when the width of the tooltip exceeds the browser viewing area, it will automatically reposition itself, so the contents can be viewed in full. The tooltip should not overlap the div link. The tooltip should not change the width or height when re-positioning. Please help.

Here is my Code example

+5
source share
3 answers

:

(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"));

, .

+1

codebins :

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 rel "htmltooltip" , "htmltooltip". .

div tooltip , , .

: http://codebins.com/codes/home/4ldqpbl

0

More articles:


All Articles