css - 如何在鼠标悬停图标时显示消息

Question

我以这种方式显示一个图标：

<?php echo anchor('stuff/edit', '<i class="icon-edit icon-white"></i>', array('class'=>'btn btn-info')); ?>

我想要的是，当我将鼠标悬停在图标上时，会弹出一条显示“编辑”的消息。与此板上的图标一样，如果您将鼠标悬停在 {} 图标上，则会显示一条消息，显示“代码示例...”。我想要使​​用引导程序。

提前致谢。

Answer 1

很简单，如果你想让它显示原生方式，即没有自定义和样式，使用'title'属性；

<a href="/path" title="Click me"><i class="icon-edit icon-white"></i></a>

对于更漂亮和更大的消息，您可以使用 bootstrap 的 TOOLTIP

请参阅引导工具提示。它太容易了：

<a href="#" data-toggle="tooltip" title="Click me"><i class="icon-edit icon-white"></i></a>

如果您包含 bootstrap.js，它将显示“第一个工具提示”

Answer 2

通过 jQuery 解决方案使用 jQuery UI

头部标签中的 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>

BODY 标记中的 HTML

<a href="#" id="show-option" title="edit"><i class="icon-edit icon-white">icon</i></a>

JavaScript

$(function() {
    $( "#show-option" ).tooltip({
        show: {
        effect: "slideDown",
        delay: 300
        }
    });
});

有关其他信息，请参阅http://jqueryui.com/tooltip/

Answer 3

我不知道是否有针对此的 css 方法，但是您可以将 tooltip="string" 添加到 asp 标签，在 html 标签上使用 title="string"。