基本的工具提示（jQuery的）

HTML：基本的工具提示（jQuery的）

<a href="#" rel="tooltip">Open Tooltip</a> 
<div id="tooltip">Tooltip Content</div>

我查了一些提示插件，但我的要求是很基本的工具提示，顯示上懸停一個隱藏的股利。所有插件都有太多的高級選項，我不需要它們，並且已經設計了可能難以修改的工具提示。

我很感激任何幫助。謝謝。

來源

2010-04-08 3zzy

你想在工具提示中顯示hiddev div嗎？那麼用戶會如何知道，以便將鼠標懸停在那裏。 – Salil 2010-04-08 08:16:29

+1將要求降至最低。 – 2012-10-19 22:42:17

你可以推出自己的。

我的建議是隻存儲傳遞給onmouseover事件處理程序的鼠標事件對象的clientX和clientY屬性。然後將隱藏div的CSS屏幕位置（left,top）設置爲這些座標，並且您是黃金。 確保div的position CSS屬性是absolute

快速未經測試的例子只是給你一個想法：

$('[rel="tooltip"]').hover(function(e) { 
    var x = e.clientX; 
    var y = e.clientY; 
    _div.css({ top: y, left: x, position: 'absolute' }) 
     .fadeIn(); 
}, function() { 
    _div.fadeOut(); 
});

來源

2010-04-08 08:15:11

很好，謝謝。只是定位不正確;它會在右下方打開，而不是右上角。我想我必須找到#tooltip的高度並將其設置爲頂部： - [height]，不是？ – 3zzy 2010-04-08 08:42:58

嘗試'clientX'和'clientY'而不是'pageX'和'pageY'。 – 2010-04-08 08:45:11

$('a[rel=tooltip]').bind('mouseover',function(e){ 
    e=e?e:window.event; 
    $('#tooltip').css({ 
    position:'absolute', 
    top:e.pageY, 
    left:e.pageX 
    }); 
})

來源

2010-04-08 08:20:37 markcial

下面是我用一個很簡單的CSS工具提示的代碼：

CSS：

.name a:hover { 
background:#ffffff; 
text-decoration:none; 
} 

.name a.tooltip span { 
display:none; 
padding:5px; 
margin-left:108px; 
width:100px; 
} 

.name a.tooltip:hover span { 
display:inline; 
position:absolute; 
background:#ffffff; 
border:1px solid #cccccc; 
color:#000000; 
top:5px; 
left:-15px; 
}

頂部和左側屬性使其浮在文本上方。改變這個位置在你喜歡的位置。另外，如果您希望它的行爲與普通的定位div相同，請將display:inline;更改爲display:block;。

HTML：

 <div class="name"> 
     Name 
     <a class="tooltip" href="#"> 
      Tooltip 
      <span> 
       Tooltip text here. 
      </span> 
     </a>. 
    </div>

來源

2010-04-08 08:21:29 Kyle

令人驚訝的簡單。雖然我來這裏尋找jQuery解決方案，但我很高興選擇這種純粹的CSS方法。唯一的缺點是沒有淡入/淡出，這是傳統工具提示的典型特徵，所以可以通過jQuery輕鬆實現。這就是說，它似乎是可能的純CSS：http://www.cssplay.co.uk/opacity/fadein.html – 2012-10-19 23:03:20

它可以得到與CSS3轉換淡入淡出。但這在傳統瀏覽器中不會被支持。 – Kyle 2012-10-20 09:10:35

好點，CSS3比我鏈接到的舊解決方案更有意義。 IE似乎是唯一不支持CSS3轉換屬性的瀏覽器。過去我使用過CSS3 PIE（http://css3pie.com/），以在IE6 +上實現CSS3邊框半徑獲得巨大成功。不幸的是，它似乎不支持轉換（http://css3pie.com/documentation/supported-css3-features/）。關於IE轉換支持的現有討論在這裏：http://stackoverflow.com/questions/5103283/does-internet-explorer-support-css-transitions – 2012-10-20 10:17:05

，如果你只是想顯示鼠標懸停使用DIV：

$('a[rel="tooltip"]').hover(
    function(){ $('#tooltip').show() }, //or maybe use fadeIn() instead of .show() 
    function(){ $('#tooltip').hide() } 
)

您可以在功能markcial的解決方案集成，使工具提示格旁邊顯示您的光標。

看起來像這樣

$('a[rel="tooltip"]').hover(
    function(e){ $('#tooltip').css({ position:'absolute', top:e.pageY, left:e.pageX }).show() }, //or maybe use fadeIn() instead of .show() 
    function(){ $('#tooltip').hide() } 
)

來源

2010-04-08 08:24:26 meo

下面是一個更基本的工具提示：http://jsfiddle.net/WH7Kf/54/

隱藏工具提示：

.tooltip span { 
display:none; 
}

顯示工具提示：

.tooltip:hover span { 
display:inline; 
}

來源

2014-05-07 02:13:37

我正在尋找相同的，但沒有JavaScript或jQuery。我發現以下方式使用純CSS3轉換。

CSS3

a.tooltip span 
{ 
    position: absolute; 
    top: 30px; 
    left: 50%; 
    margin-left: -76px; 
    z-index: 999; 
    width: 250px; 
    height: auto; 
    color: #fff; 
    font-size: 12px; 
    line-height: 20px; 
    border-radius: 6px; 
    padding: 2px; 
    text-align: center; 
    background: #000; 
    border: 1px solid #808080; 
    visibility: hidden; 
    opacity: 0; 
    -webkit-transition: all 2s ease-out 0s; 
    -moz-transition: all 2s ease-out 0s; 
    -ms-transition: all 2s ease-out 0s; 
    -o-transition: all 2s ease-out 0s; 
    transition: all 2s ease-out 0s; 
} 
a:hover.tooltip span 
{ 
    visibility: visible; 
    -webkit-opacity: 0.90; 
    -moz-opacity: 0.90; 
    opacity: 0.90; 
}

HTML

<a class="tooltip" href="#">Hover Me 
    <span>Some text information that you want to display in tooltip</span></a>

更多細節與現場演示，請訪問：Tooltip Example using CSS3 Transitions這裏。

來源

2015-01-15 10:36:07

基本的工具提示（jQuery的）

回答

相關問題