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

• 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

3 Answers 3

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>