Last Modified: 2019-04-30

YACOP - Yet Another Callout Plugin - JQuery

author: Alberto Lepe (www.alepe.com)
Screenshot | Demo

Overview

Once upon a time there was a callout plugin for Jquery, which I never had the oportunity to meet. It seems that it went offline... So, as I needed that functionality I decided to build my own plugin (from scratch) and share it with the community.

Advantages

Easy to use and implement
Pure CSS+JQuery implementation (no images required).
Highly customizable
Minimal CSS properties required

Example:

//Javascript
$("#mydiv").callout("What is this?");

/* CSS */
.callout {
    padding: 5px;
    border: 1px solid #7992B0;
    background-color: #8AA9B7;
}

Download (Updated: 2012-09-13)

[12 Kb ] jquery.callout.src.js
[ 5.4 Kb ] jquery.callout.min.js (minified version)

More Examples:

There are mainly 2 ways to use this plugin:

[1] Create the callouts and then show/hide them on event.

Example: if you want to use it in a form to show errors.

[2] Create and destroy it every time.

Example: Dynamically elements created with AJAX.

[1] Create -> Show/Hide

$(function() {
    $("#mydiv").callout({ show: false, msg:"What is this?" });
});
$("#mydiv").hover(function() {
    $(this).callout("show");
},function() {
    $(this).callout("hide");
});

[2] Create/Destroy

$("#mydiv").hover(function() {
    $(this).callout("What is this?");
},function() {
    $(this).callout("destroy");
});

You can use multiple elements for a single type of callout or set several callouts to a single element.

Multiple elements - one callout

$("a.hint").callout("Click here please!");or:

$("a.hint").each(function() {
    $(this).callout($(this).attr("title"));
});

Multiple callouts - one element

$("#special").callout({
    position: "bottom",
    align:"left",
    pointer: "left",
    msg: "Start here"
}).callout({
    position: "top",
    align:"right",
    pointer: "right",
    msg: "Ends here"
});

And of course, it can be chained with other JQuery functions:

$(".error").callout("Oops!").css("color",red);

Documentation

$(selector).callout( OPTIONS );

Options

msg [ required ]

The content of the message (text or html)

$("#mydiv").callout("What is this?");

//Or can be also specified as:

$("#mydiv").callout({ msg: "What is this?" });

//Passing other element content as message:

$("#mydiv").callout({ msg: $("#otherdiv").html() });

width [ default: auto ]

Callout width (without unit).

height [ default: auto ]

Callout height (without unit).

Note: It can be specified in the CSS file too. (see CSS section below)

$("#msg").callout({
    width: 200,
    msg:"What is this?"
});
$("#mydiv").callout({
    width: 200,
    height: 100,
    msg:"What is this?"
});

position [ default : top ]

Callout position in relation to the selected element(s)
Values:left | right | top | bottom

$("#mydiv").callout({
    position: "top",
    msg:"What is this?"
});

align [ default : center ]

Callout alignment in relation to the selected element(s)
Values:left | right | top | bottom
Note:This is not text alignment. For text alignment use CSS

$("#mydiv").callout({
    position: "top",
    align : "left",
    msg:"What is this?"
});

pointer [ default : center ]

Callout pointer alignment in relation to the callout element.
(By "pointer" I mean the triangle used to point at the target element.)
Values:left | right | top | bottom | none
Note:When using "none" it will not display the pointer.

$("#mydiv").callout({
    position: "top",
    align : "left",
    pointer: "right",
    msg:"What is this?"
});

fadeIn , fadeOut [ default: 2000 , 1000 ]

How fast or how slow do the callout appears / hides.

$("#mydiv").callout({
    msg:"What is this?",
    fadeIn: 200,
    fadeOut: 500
});

afterCreate, beforeShow, afterShow, beforeHide, afterHide, beforeDestroy, beforeReorder, afterReorder (Event Functions)

Functions to be executed on events (added in 20120913 version):

$("#mydiv").callout({ msg: "This is me", 
       afterCreate: function() {
        console.log("Hello!");
    }, beforeShow: function() { 
        console.log("Prepare to be amazed!");
    }, afterShow: function() {
        console.log("Applause!");
    }, beforeHide: function() {
        console.log("I'll be back!");
    }, afterHide: function() {
        console.log("Where am I?");
    }, beforeDestroy: function() {
        console.log("Bye Bye!");
    }
});

NOTE: "beforeReorder" and "afterReoder" happen during window resize or during "show". The internal "Reorder" function calculates the correct position in which it has to be displayed.
Those events will be only called if the callout is visible, which will not be called during "show" unless the callout is already visible (like, for example when fixing its position when the target element position changes).

css [ no default value ]

Additional classname for the callout (see CSS section below)

CSS Customization

By default the callout has no style. It will use the class "callout" to give it style, for example, this is a basic callout:

.callout {
    padding: 5px;
    border: 1px solid #7992B0;
    background-color: #8AA9B7;
}

That is all you need to specify. But if you want a nicer callout, you can add round corners and shadows:

.callout {
    padding: 5px;
    border: 1px solid #7992B0;
    background-color: #8AA9B7;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    box-shadow:		 5px 5px 10px rgba(0, 0, 0, 0.6);
    -moz-box-shadow:	5px 5px 10px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
}

Using the above examples will apply the same style for all your callouts. You don't have to specify the "css" callout option. In order to have diferent styles of callouts in one page, use the "callout" class to specify common properties, for example:

.callout {
    padding: 5px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

Then, add other classes (you choose the name) to specify further properties, for example the color:

.callout.red {
    border: 1px solid #EC2828;
    background-color: #8D1010;
    color: white;
}

.callout.yellow {
    border: 1px solid #B98F0F;
    background-color: #F7F3B1;
}

And as specified previously, set the class in the options, like:

$("#mydiv").callout({
    css:"red",
    msg:"What is this?"
});

At the demo page you can see other styles, but don't limit yourself to those, be creative :). If you want to share your creation, please let me know to add it to the callouts gallery.

Adjusting style:

Optionally, you can adjust the margins, width and height of your callout directly in the CSS like:

.callout {
    margin-left: 30px;
    width: 200px;
    height: 100px;
}

The plugin will automatically adjust accordingly.

Remember that you can use any CSS property inside your callouts, like aligning text, setting background images or gradients, etc.
NOTE:The style of the pointer may not look correctly when using too much transparency, background images or border images.

Special CSS Customization:

If you need further customization, you can set additional properties to these classes:

callout_main:This is the main wrapper of the callout (usually it does not need style).
callout_cont_* :This sets the additional style for "div.callout" according to the position.
callout_*:This sets the additional style for "div.callout_main > div.callout_tri" which is the pointer (tri stands for triangle). You may need to set in this class mainly the "left" and "top" properties for fixing misalignment.

Substitute "*" for 'left' , 'right' , 'top' or 'bottom'.

Compatibility:

JQuery:

* 1.3.x and UP

Supported Browsers:

* Firefox
* Chrome
* Safari
* Opera
* IE9 (Untested)

Current version

2012-09-13

Change log (links on dates will show source code of that version)

2012-09-13: Added events as suggested by Cemil Fidanlıgül
2012-05-20: The for loops were iterating through more properties than just the callouts and the callout property was removed upon destroy. Patch sent by: Conan C. Albrecht
2010-12-15: Class restructured
2010-12-14: if "title" is present, use that as content
2010-11-12: Added fadeIn/fadeOut as suggested by Donal Murtagh
2010-06-21: Shortcut for messages
2010-05-20: First release
2010-05-19: Yacop was born!