CODEWITHSUNDEEP
jqueryasp.netjquery-tooltip
Vivekh
Vivekh

Reputation: 4259

Any alternate way of displaying tool tips instead of writing multiple jquery function

This is my design

 <%@ 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>

If you see I am writing multiple functions for each ID. Instead of that can I have a single function and show the required tool tip

Upvotes: 1

Views: 179

Answers (3)

Rory McCrossan
Rory McCrossan

Reputation: 337560

I'm not familiar with the formbubble plugin, but you should be able to attach the events by class, rather than individual id. Try this:

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

Upvotes: 2

MetalFrog
MetalFrog

Reputation: 10523

This is one of the reasons that classes exists.

$('.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);
});

Then, you just give each element you want to have a tooltip that class.

<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>

Upvotes: 1

Thinking Sites
Thinking Sites

Reputation: 3542

$("[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);
        });

Upvotes: 0

Related Questions