JS：圖標右側的工具提示的相對位置

Question

我有一個圖標，當您將鼠標懸停在圖標上時，我想要在圖標的右側顯示一個自定義CSS工具提示。無論您是向上還是向下滾動頁面，工具提示都將始終需要顯示在圖標的右側。

不，我不想使用任何插件。我只想要一點JS/CSS來完成這項工作。如果您使用JQuery，則需要與v1.7和JQuery-UI：v1.8兼容。

此外，它需要與IE 6和7兼容。

我寧願將我的元素留作兄弟姐妹，但它看起來像在某些情況下出現的div需要是子元素，所以如果需要更改HTML即可。

HTML：

<img src="" class="icon">ICON<img/> 

<div class="demo"> 
    STUFF<br/> 
    STUFF<br/> 
    STUFF<br/> 
    STUFF<br/> 
    STUFF<br/> 
</div> 

CSS：

.demo { 
    margin-left: 5px; 
    padding: 10px; 
    width: 265px; 
    height: 110px; 
    background-color: #ccc; 
    position: relative; 
    border: 2px solid #333; 
} 

.demo:after, .demo:before { 
    border: solid transparent; 
    content: ' '; 
    height: 0; 
    right: 100%; 
    position: absolute; 
    width: 0; 
} 

.demo:after { 
    border-width: 11px; 
    border-right-color: #ccc; 
    top: 13px; 
} 

.demo:before { 
    border-width: 14px; 
    border-right-color: #333; 
    top: 10px; 
} 

活生生的例子：http://jsfiddle.net/49Js3/16/

Answer 1

小提琴這裏：http://jsfiddle.net/49Js3/29/

我沒有訪問IE6的權限，所以我不知道它是否合法。我知道你需要一個錨來獲得懸停行爲與IE7和更早的CSS。

因此，我在圖片上添加了一個錨點，以及包含工具提示的div。

HTML

<div class="outer"> 
<a class="tippy" href=""> 
     <img src="" class="icon">ICON<img/> 
    </a> 

    <div class="demo">STUFF 
     <br/>STUFF 
     <br/>STUFF 
     <br/>STUFF 
     <br/>STUFF 
     <br/> 
    </div> 
</div> 

這裏是CSS：

.tippy { 
    text-decoration: none; 
} 
.outer { 
    width: 350px; 
} 
a.tippy:hover + div { 
    display:block; 
    float: right; 
} 
.demo { 
    margin-left: 5px; 
    padding: 10px; 
    width: 265px; 
    height: 110px; 
    background-color: #ccc; 
    position: relative; 
    border: 2px solid #333; 
    display: none; 
} 
.demo:after, .demo:before { 
    border: solid transparent; 
    content:' '; 
    height: 0; 
    right: 100%; 
    position: absolute; 
    width: 0; 
} 
.demo:after { 
    border-width: 11px; 
    border-right-color: #ccc; 
    top: 13px; 
} 
.demo:before { 
    border-width: 14px; 
    border-right-color: #333; 
    top: 10px; 
}