如何使鼠标悬停在图标上时显示信息 [英] How to make a message show up when mouse over icon

问题描述

我以这种方式显示图标：

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.

提前感谢。

推荐答案

由jQuery解决方案使用jQuery UI

By jQuery solution use jQuery UI

头部标记中的HTML

HTML in head tag

<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

HTML in BODY tag

<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
        }
    });
});

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

for additional information see http://jqueryui.com/tooltip/

这篇关于如何使鼠标悬停在图标上时显示信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！