問題設置css權屬性

Question

我做了一個簡單的工具提示生成器，使用JQuery 1.10.2讀取元素的title值。

它工作正常，除了如果元素在屏幕的右側，有時工具提示會浮動在頁面的邊緣。

如果元素靠近頁面的右側，我想將它放置在靠近元素右邊的某個位置。

我的代碼在下面，也是一個JSFiddle。所有的輸入讚賞！

function BuildTipsV3() { 
    var tt = $("#ttfloat"); 
    $("[title]").on({ 
     mouseenter: function() { 
      // set tooltip 
      var o = $(this).offset(); 
      var y = o.top; 
      var x = o.left; 
      var tooltip = $(this).attr('title') || $(this).data('title'); 
      $(this).attr('title', ''); 
      $(this).data('title', tooltip); 
      tooltip = tooltip.replace(/(\r\n|\n|\r)/gm, "<br/>"); 
      tt.html(tooltip); 
      // position tooltip and show 
      var ttRightSide = x + tt.width(); 
      if (ttRightSide < $(window).width()) { 
       tt.css({ top: (y + 15), left: (x + 5) }); 
      } else { 
       tt.css({ top: y, right: 0 }); // <-- problem (right:0) doesn't work 
      } 
      tt.show(); 
     }, 
     mouseleave: function() { 
      $("#ttfloat").hide(); 
      $(this).attr('title', $(this).data('title')); // reset for accessibility 
     } 
    }); 
} 

http://jsfiddle.net/HSfHD/2/

Answer 1

你是如此接近。

FIDDLE

你只需要重置left和right風格，當你不使用它們：

if (ttRightSide < $(window).width()) { 
    tt.css({ 
     top: (y + 15), 
     left: (x + 5), 
     right:'auto' 
    }); 
} else { 
    tt.css({ 
     top: y + 15, 
     right: 0, 
     left:'auto' 
    }); 
} 

Answer 2

如果將鼠標懸停在左元素它設置CSS left但是當你將鼠標懸停在權元素上只設置了CSS right屬性，因此最終的風格將有設置了left和right。

您需要的left重置回其默認值第一個（可能是相同的其他屬性），例如see demo在那裏我已經添加以下代碼：

if (ttRightSide < $(window).width()) { 
    tt.css({ 
     top: (y + 15), 
     right: 'auto', 
     left: (x + 5) 
    }); 
} else { 
    tt.css({ 
     top: y + 15, 
     right: 0, 
     left: 'auto' 
    }); 
} 

Answer 3

纔算左代替。

tt.css({ 
    top: y+20, 
    left: $(window).width() - tt.width() - 20 
});