I have been searching for a way to implement a hover-over popup with no luck. Because it is used on so many sites I thought it would be easy to find instructions, but I am wondering if I am missing something basic. I have looked at qTips2 and a few others, but these seem like way more than I need.
我一直在寻找一种方法来实现一个没有运气的悬停弹出窗口。因为它被用在很多网站上我觉得很容易找到说明书,但我想知道我是否遗漏了一些基本的东西。我看过qTips2和其他几个,但这些看起来比我需要的更多。
I have a Rails 3.1 app and want to display more details when a user hovers over a line in a table. Is this something built into Rails that I am missing, or do I need an add-on?
我有一个Rails 3.1应用程序,并希望在用户将鼠标悬停在表格中的某一行时显示更多详细信息。这是我缺少的Rails内置的东西,还是我需要一个附加组件?
I sure would appreciate someone pointing me in the right direction.
我肯定会感谢有人指点我正确的方向。
Thanks!
谢谢!
2 个解决方案
#1
11
Use some CSS and Javascript!
使用一些CSS和Javascript!
Here's an example you can play with: http://jsfiddle.net/cdpZg/
以下是您可以使用的示例:http://jsfiddle.net/cdpZg/
Copying it here, just in case.
复制它,以防万一。
HTML:
HTML:
<div id='user'>I am a user. Move your mouse over me</div>
<div id='popup'>Extended info about a user</div>
<div>I a piece of useless information. No use hovering over me.</div>
CSS:
CSS:
#popup {
height: 50px;
width: 200px;
text-align: center;
vertical-align:middle;
background-color: cornflowerblue;
color: white;
display: none;
padding-top: 8px;
position: absolute;
}
Javascript:
使用Javascript:
$(document).ready(function() {
$('#user').hover(function() {
$('#popup').show();
}, function() {
$('#popup').hide();
});
});
#2
6
Just set the title on your link like this
只需在此链接上设置标题即可
<a title="Some text that will show up when I hover over this link">My link</a>
#1
11
Use some CSS and Javascript!
使用一些CSS和Javascript!
Here's an example you can play with: http://jsfiddle.net/cdpZg/
以下是您可以使用的示例:http://jsfiddle.net/cdpZg/
Copying it here, just in case.
复制它,以防万一。
HTML:
HTML:
<div id='user'>I am a user. Move your mouse over me</div>
<div id='popup'>Extended info about a user</div>
<div>I a piece of useless information. No use hovering over me.</div>
CSS:
CSS:
#popup {
height: 50px;
width: 200px;
text-align: center;
vertical-align:middle;
background-color: cornflowerblue;
color: white;
display: none;
padding-top: 8px;
position: absolute;
}
Javascript:
使用Javascript:
$(document).ready(function() {
$('#user').hover(function() {
$('#popup').show();
}, function() {
$('#popup').hide();
});
});
#2
6
Just set the title on your link like this
只需在此链接上设置标题即可
<a title="Some text that will show up when I hover over this link">My link</a>