Wskazówka o pozycji automatycznej po przekroczeniu szerokości przeglądarki

Question

To, co chcę zrobić, to gdy szerokość podpowiedzi przekracza zasięg widoczności przeglądarki, automatycznie zmieni pozycję, aby zawartość mogła być w pełni przeglądana. Etykieta narzędzia nie powinna nakładać się na element div z odniesieniami. Przy zmianie położenia etykieta narzędziowa nie powinna zmieniać rozmiaru ani wysokości. Proszę pomóż.

Oto mój przykładowy Code

Answer 1

Starasz się to zrobić?

See Demo:http://jsfiddle.net/rathoreahsan/mpDXY/

referencyjny WWW:http://www.javascriptkit.com/script/script2/htmltooltip.shtml

Answer 2

znalazłem rozwiązanie i zrobić na codebins następująco:

1) Dołącz jQuery 1.2.2.pack. js i htmltooltip.js pliki javascript w nagłówku.

2) napisać 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> 

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

na powyższy HTML, musimy ustawić atrybut rel z "htmltooltip" na każdego znacznika i zgodnie z jego celu stworzyliśmy powiązana podpowiedź z klasą "htmltooltip". teraz pokazuje rozkazy mylące uporządkowane po myszą nad każdym tagiem.

Sprawdza także pozycję automatyczną etykiety narzędziowej, a jeśli przekracza szerokość przeglądarki, wyświetla etykietę w obszarze przeglądarki.

Spróbuj Demo tutaj: http://codebins.com/codes/home/4ldqpbl

Answer 3

Teraz zrobiłem własne wtyczki do autoposition obiektu:

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

Aby go użyć:

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

Nadzieja może pomóc innym.