javascript - Programmable Callout JQuery Plugin - Stack Overflow

admin管理员组

文章数量:1434949

I noticed on Facebook recently, that to introduce its new features, a callout appeared for the various new features (6 of them). The callout appeared on the left to identify the first feature. As you "X"ed it out, the next callout appeared to highlight the next feature, and so on. This was awesome, so I wanted to add this feature to my site. Is there a plugin available just for the callout part, which I can show, hide, and reposition?

Thanks.

I noticed on Facebook recently, that to introduce its new features, a callout appeared for the various new features (6 of them). The callout appeared on the left to identify the first feature. As you "X"ed it out, the next callout appeared to highlight the next feature, and so on. This was awesome, so I wanted to add this feature to my site. Is there a plugin available just for the callout part, which I can show, hide, and reposition?

Thanks.

• javascript
• jquery
• jquery-plugins

Share Improve this question Follow asked Mar 4, 2012 at 19:59 Brian MainsBrian Mains 50.7k3535 gold badges155155 silver badges260260 bronze badges 3

• 4 I am not facebook user, os perhaps you want to include a screenshot of what you mean? How about qTip craigsworks./projects/qtip2 – d_inevitable Commented Mar 4, 2012 at 20:02
• @d_inevitable Yes, that's a good one, will look into, thanks. – Brian Mains Commented Mar 5, 2012 at 0:55
• possible duplicate of jquery library for callout – Alex Angas Commented Mar 4, 2014 at 4:31

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

There are several jQuery plugins that do that effectively. Here are some that e to mind:

• Meow

Google for growl-like notifications for more, there's plenty around.

I ended up going for QTip 2: http://craigsworks./projects/qtip2, as @d_inevitable mentioned.

I have created a plugin that will allow you to do just this. You can find it there: https://github./devmnrj/myAlert

Here is a little JS code demo:

<script type="text/javascript">
    var myAlert = new MyAlert();
    window.onload = function(){
        $("#anchor").on("click", function(e){
            myAlert.show({'x':e.pageX, 'y':e.pageY}, {
                'header': "<em>Hello!</em><br/><small>I am a header</small>",
                'body': "I am the body of the dialog, so i should be bigger. Yeah, more text here. I can also update me <a>here</a>.",
                'footer': "footer: goodbye!"
            });
        });
    };
</script>

本文标签： javascriptProgrammable Callout JQuery PluginStack Overflow