Question

我以这种方式显示图标：

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

我想要的是当我用鼠标悬停在图标上时会弹出一条消息，显示“编辑”。就像使用此板上的图标一样，如果您将鼠标悬停在{}图标上，则会显示一条显示“Code Sample ...”的消息。我希望使用bootstrap。

提前致谢。

Answer 1

通过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 2

我不知道是否有这样的css方法，但你可以在asp标签上添加tooltip =“string”，在html标签上使用title =“string”。

Answer 3

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

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

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

见Bootstrap Tooltip。它太容易了：

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

如果你有bootstrap.js，它会显示'first tooltip'

当鼠标悬停在图标上时如何显示消息

3 个答案: