twitter-bootstrap 鼠标悬停在图标上时如何显示消息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18169414/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a message show up when mouse over icon
提问by fedejp
I am displaying an icon this way:
我以这种方式显示图标：
<?php echo anchor('stuff/edit', '<i class="icon-edit icon-white"></i>', array('class'=>'btn btn-info')); ?>
And what I want is that when I hover over the icon with the mouse a message that says "Edit" pops up. Just like with the icons on this board, if you hover over the {} icon a message that says "Code Sample..." shows up. I want that using bootstrap.
我想要的是，当我用鼠标将鼠标悬停在图标上时，会弹出一条消息，显示“编辑”。就像此板上的图标一样，如果您将鼠标悬停在 {} 图标上，则会显示一条消息，内容为“代码示例...”。我想要使用引导程序。
Thanks in advance.
提前致谢。
回答by Jithesh
Its simple, If you want it to show the native way, ie with no customizations and styles, use 'title' attribute;
很简单，如果您希望它以原生方式显示，即没有自定义和样式，请使用 'title' 属性；
<a href="/path" title="Click me"><i class="icon-edit icon-white"></i></a>
For more beautiful and larger messages, you could use bootstrap's TOOLTIP
对于更漂亮和更大的消息，您可以使用 bootstrap 的 TOOLTIP
See Bootstrap Tooltip. Its too easy as:
请参阅Bootstrap 工具提示。它太容易了：
<a href="#" data-toggle="tooltip" title="Click me"><i class="icon-edit icon-white"></i></a>
If you have bootstrap.js included, it will show 'first tooltip'
如果您包含 bootstrap.js，它将显示“第一个工具提示”
回答by cavaliercyber
By jQuery solution use jQuery UI
通过 jQuery 解决方案使用 jQuery UI
HTML in head tag
head 标签中的 HTML
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
HTML in BODY tag
BODY 标签中的 HTML
<a href="#" id="show-option" title="edit"><i class="icon-edit icon-white">icon</i></a>
JavaScript
JavaScript
$(function() {
$( "#show-option" ).tooltip({
show: {
effect: "slideDown",
delay: 300
}
});
});
for additional information see http://jqueryui.com/tooltip/
有关其他信息，请参阅http://jqueryui.com/tooltip/
回答by user314321
I do not know if there is a css method for this, however you can add tooltip="string" to asp tags, on html tags use title="string".
我不知道是否有用于此的 css 方法，但是您可以将 tooltip="string" 添加到 asp 标签，在 html 标签上使用 title="string"。
