使用HTML5/CSS3更改工具提示位置

Question

我從站點獲得了一些CSS3代碼，該代碼在懸停在錨點元素（<a>）上時提供了一個漂亮的工具提示框。但是，工具提示總是顯示在<a>的右上方。如果錨點位於屏幕的頂部，則工具提示離開瀏覽器的頂部邊緣，如果錨點位於屏幕的右邊緣，則工具提示出現在瀏覽器的右側。無論哪種情況，我都看不到這個工具提示的大部分內容。有沒有一種方法可以動態地讓工具提示出現在屏幕的可見區域，取決於屏幕邊緣與錨點的距離？

這裏是CSS和樣品錨：

.tooltip { 
    border-bottom: 1px dotted #0077AA; 
    color: #0077AA; 
    cursor: help; 
} 

.tooltip:hover { 
    color: #0099CC; 
} 

.tooltip:after { 
    -moz-transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out; 
    -ms-transition: all 0.4s ease-in-out; 
    -o-transition: all 0.4s ease-in-out; 
    -webkit-transition: all 0.4s ease-in-out; 
    background: rgba(0, 0, 0, 0.8); 
    border-radius: 8px 8px 8px 0px; 
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); 
    color: #FFF; 
    content: attr(data-tooltip); 
    margin-top: -24px; 
    opacity: 0; 
    padding: 3px 7px; 
    position: absolute; 
    transition: all 0.4s ease-in-out; 
    visibility: hidden; 
} 

.tooltip:hover:after { 
    opacity: 1; 
    visibility: visible; 
} 

.htooltip, .htooltip:visited, .tooltip:active { 
    color: #0077AA; 
    text-decoration: none; 
} 

.htooltip:hover { 
    color: #0099CC; 
} 

.htooltip span { 
    -moz-transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out; 
    -ms-transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out; 
    -o-transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out; 
    -webkit-transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out; 
    background-color: rgba(0, 0, 0, 0.8); 
    border-radius: 15px 15px 15px 0px; 
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); 
    color: #fff; 
    margin-left: 2px; 
    margin-top: -75px; 
    opacity: 0; 
    padding: 10px 10px 10px 40px; 
    position: absolute; 
    text-decoration: none; 
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out; 
    visibility: hidden; 
    width: 350px; 
    z-index: 10; 
} 

.htooltip:hover span { 
    opacity: 1; 
    position: absolute; 
    visibility: visible; 
} 

和HTML：

<a class="htooltip" href="#">WA &mdash; Washington 
<span>Washington State is the northwesternmost state in the contiguous 48.</span> 
</a> 

UPDATE：

這裏是我的解決方案第一亂作一團，如果它可能對某人有幫助：

<script type="text/javascript" src="jquery-1.7.2.js"></script> 

    <style type="text/css"> 
     .htooltip, .htooltip:visited, .tooltip:active 
     { 
      color: #0077AA; 
      text-decoration: none; 
     } 

     .htooltip:hover 
     { 
      color: #0099CC; 
     } 

     .htooltip span 
     { 
      background-color: rgba(0,0,0, 0.8); 
      border-radius: 15px 15px 15px 0px; 
      box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5); 
      color: #fff; 
      opacity: 0; 
      padding: 10px 10px 10px 40px; 
      position: absolute; 
      text-decoration: none; 
      visibility: hidden; 
      width: 350px; 
      z-index: 10; 

      -moz-transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out; 
      -webkit-transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out; 
      -o-transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out; 
      -ms-transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out; 
      transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out; 
     } 

     .htooltip:hover span 
     { 
      position: absolute; 
      opacity: 1; 
      visibility: visible; 
     } 
    </style> 


<a onmouseover="SetTopLeft(this);" class="htooltip" href="#">WA &mdash; Washington<span>Washington State is the northwesternmost state in the contiguous 48.</span></a> 


    <script type="text/javascript"> 
     function SetTopLeft(obj) { 
      var mouseX = $(obj).offset().left; 
      var mouseY = $(obj).offset().top - $(window).scrollTop(); 
      var screenWidth = $(window).width(); 
      var screenHeight = $(window).height(); 

      var top; 
      var left; 

      // If the tooltip would be too close to the top of the browser, show it below the element. 
      if (screenHeight - mouseY > screenHeight - 50) 
      { 
       top = mouseY + 17; 
      } 
      else 
      { 
       top = mouseY - 60; 
      } 

      if (screenWidth - mouseX < 350 && mouseX < 350) // Close to the left and the right - center the span over the element. 
      { 
       left = mouseX/2; 
      } 
      else if (screenWidth - mouseX < 350) // Close to the right - put span to the left. 
      { 
       left = mouseX - 350; 
      } 
      else 
      { 
       left = mouseX + 50; // Close to the left with extra space on the right - put span to the right. 
      } 

      $(obj).find("span").css("top", top); 
      $(obj).find("span").css("left", left); 
     } 
    </script> 

Answer 1

看到這個jsfiddler。我添加了這幾行：

.htooltip span { 
    position: relative; 
    top: 6em; 
    left: 5em; 
    /* ... */ 
}