jquery - 超出浏览器宽度时自动定位工具提示

Question

我想要发生的是当工具提示宽度超过浏览器的可视区域时，它会自动重新定位自己，因此可以完全查看内容。工具提示不应与引用的 div 重叠。重新定位自身时，工具提示不应调整宽度或高度。请帮忙。

这是我的示例代码

Answer 1

你想这样做吗？

见演示：http: //jsfiddle.net/rathoreahsan/mpDXY/

参考网站： http ://www.javascriptkit.com/script/script2/htmltooltip.shtml

Answer 2

现在我制作了自己的插件来自动定位对象：

(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 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*/
}

在 Above Html 中，我们在每个标签上设置了带有“htmltooltip”的 rel 属性，并根据其顺序，我们使用类“htmltooltip”设置了相关的工具提示。现在，它在每个标签的鼠标悬停时显示按顺序排列的工具提示。

它还检查工具提示 div 的自动位置，如果超过浏览器宽度，则在浏览器区域内显示工具提示。

在这里尝试演示：http: //codebins.com/codes/home/4ldqpbl