显示工具提示而不是编写多个 jquery 函数的任何替代方式答案

【问题标题】：Any alternate way of displaying tool tips instead of writing multiple jquery function显示工具提示而不是编写多个 jquery 函数的任何替代方式
【发布时间】：2012-05-18 21:15:08
【问题描述】：

这是我的设计

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>FormBubble Examples</title>
    <link href="stylesheets/formbubble.css" media="screen" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.formbubble.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $('#foobar1').hover(function () { //hover
                $(this).formBubble({
                    closeButton: false
                });
                $.fn.formBubble.text('hover hover hover hover');
            }, function () { //mouse out
                var thisBubble = $.fn.formBubble.bubbleObject;

                $.fn.formBubble.close(thisBubble);
            });

            $('#foobar2').hover(function () { //hover
                $(this).formBubble({
                    closeButton: false
                });
                $.fn.formBubble.text('Hello');
            }, function () { //mouse out
                var thisBubble = $.fn.formBubble.bubbleObject;

                $.fn.formBubble.close(thisBubble);
            });

        });
    </script>
</head>
<body>
    <div style="width: 220px; margin: auto;">
        <p>
            <a href="#" id="foobar1">Static Text (Hover)</a>
        </p>
        <p>
            <a href="#" id="foobar2">HTML-based AJAX (Click)</a>
        </p>
    </div>
</body>
</html>

如果您看到我正在为每个 ID 编写多个函数。取而代之的是，我可以拥有一个功能并显示所需的工具提示

【问题讨论】：

尝试一次选择所有链接，也许使用公共类作为选择器

标签： jquery asp.net jquery-tooltip

【解决方案1】：

我不熟悉formbubble 插件，但您应该能够按类而不是单独的id 附加事件。试试这个：

<p>
    <a href="#" id="foobar1" class="formbubble">Static Text (Hover)</a>
</p>
<p>
    <a href="#" id="foobar2" class="formbubble">HTML-based AJAX (Click)</a>
</p>

$('.formbubble').hover(
    function () { //hover
        $(this).formBubble({ closeButton: false });
        $.fn.formBubble.text('hover hover hover hover');
    }, 
    function () { //mouse out
        var thisBubble = $.fn.formBubble.bubbleObject;
        $.fn.formBubble.close(thisBubble);
    }
);

【讨论】：

【解决方案2】：

这是类存在的原因之一。

$('.tooltip').hover(function(){ //hover
    $(this).formBubble({ closeButton: false });
    $.fn.formBubble.text('hover hover hover hover');
}, function(){ //mouse out
    var thisBubble = $.fn.formBubble.bubbleObject;
    $.fn.formBubble.close(thisBubble);
});

然后，您只需为每个元素提供该类的工具提示即可。

<p>
    <a href="#" id="foobar1" class="tooltip">Static Text (Hover)</a>
</p>
<p>
    <a href="#" id="foobar2" class="tooltip">HTML-based AJAX (Click)</a>
</p>

【讨论】：

【解决方案3】：

$("[title]").hover(function(){
            $(this).formBubble({
                closeButton: false
            });
            $.fn.formBubble.text('hover hover hover hover');
},function () { //mouse out
            var thisBubble = $.fn.formBubble.bubbleObject;

            $.fn.formBubble.close(thisBubble);
        });

【讨论】：