Información sobre herramientas de posición automática cuando se excede en el ancho del navegador

Question

Lo que quiero que suceda es que cuando el ancho de la información sobre herramientas exceda el área visible del navegador, se reposicionará automáticamente, para que el contenido pueda verse completamente. La información sobre herramientas no debe superponerse en div a los que se hace referencia. La información sobre herramientas no debe cambiar el ancho ni el alto cuando se reposiciona. Por favor ayuda.

Aquí es mi muestra Code

Answer 1

¿Estás tratando de hacer esto?

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

Referencia Sitio Web:http://www.javascriptkit.com/script/script2/htmltooltip.shtml

Answer 2

he encontrado solución y realizado en codebins de la siguiente manera:

1) Incluir jquery-1.2.2.pack. js y htmltooltip.js archivos javascript en el encabezado.

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> 

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

Por encima de HTML, hemos establecido atributo rel con "htmltooltip" en cada etiqueta y de acuerdo a su orden que hemos establecido información sobre herramientas relacionada con la clase "htmltooltip". ahora muestra tooltip con información sobre el orden en el mouse sobre cada etiqueta.

También comprueba la posición automática de la información sobre herramientas div y, si supera el ancho del navegador, muestra información sobre herramientas dentro del área del navegador.

Pruebe gratis aquí: http://codebins.com/codes/home/4ldqpbl

Answer 3

Ahora he hecho mi propio plugin para Posición Automática un objeto:

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

utilizarlo:

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

Espero que podría ayudar a los demás.