jCallout

A callout/tooltip demo using jquery. Home Page: https://github.com/anupamsmaurya/jCallout

by anupamsm

HTML

<center>
    <div id="title">
        jCallout
    </div>    
    <p>&nbsp;</p>
    <table width="100%">
        <tr style="background-color:#ccc;color:#fff;">
            <td class="headTD">Script</td>
            <td class="headTD">Output</td>
        </tr>
        <tr>
            <td colspan="2"><p>&nbsp;</p></td>
        </tr>
        <tr>
            <td>
                <pre>
$('#test1').jCallout({
    message: "Basic Initialisation with default values"
});
<input type="button" id="hide_test1" value="hide">&nbsp;<input type="button" id="show_test1" value="show">
                </pre>
            </td>
            <td valign="middle">
                <input type="text" id="test1" size="80"/>            
                
            </td>
        </tr>
        <tr>
            <td colspan="2"><p>&nbsp;</p></td>
        </tr>        
        <tr>
            <td>
                <pre>
$('#test2').jCallout({
    message: "position changed to right",
    position:"right"
});
<input type="button" id="hide_test2" value="hide">&nbsp;<input type="button" id="show_test2" value="show">

</pre>
            </td>
            <td>
                <input type="text" id="test2" size="40"/>
                
            </td>
        </tr>
        <tr>
            <td colspan="2"><p>&nbsp;</p></td>
        </tr>
        <tr>
            <td>
                <pre>

$('#test3').jCallout({
    message: "different colors<br>text also",
    position:"left"
});
<input type="button" id="hide_test3" value="hide">&nbsp;<input type="button" id="show_test3" value="show">
</pre>
            </td>
            <td>
                <div style="border:1px solid black;width:200px" id="test3">
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                    
                </div>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
            </td>   
       ...

CSS

.callout {
    position: absolute;
    margin: 18px 0;    
    padding: 5px;
    z-index:99;
    /*width:300px;*/
    text-align:center;
    border: 1px solid #7992B0;
    background-color: #8F8F8F;
    color:#FFFFFF;
    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);
}

.callout .notch {
    position: absolute;
    top: -10px;
    left: 20px;
    margin: 0;
    border-top: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #8F8F8F;
    padding: 0;
    width: 0;
    height: 0;     /* ie6 height fix */
    font-size: 0;
    line-height: 0;      /* ie6 transparent fix */
    _border-right-color: pink;
    _border-left-color: pink;
    _filter: chroma(color=pink);
    z-index:99;
}

.callout .notch_right{
    position: absolute;
    top: 0px;
    left: 20px;
    margin: 0;
    border-left: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #8F8F8F;
    padding: 0;
    width: 0;
    height: 0;     /* ie6 height fix */
    font-size: 0;
    line-height: 0;      /* ie6 transparent fix */
    _border-right-color: pink;
    _border-left-color: pink;
    _filter: chroma(color=pink);
    z-index:99;
}

.callout .notch_top{
    position: absolute;
    top: 0px;
    left: 20px;
    margin: 0;
    border-bottom: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #8F8F8F;
    padding: 0;
    width: 0;
    height: 0;     /* ie6 height fix */
    font-size: 0;
    line-height: 0;      /* ie6 transparent fix */
    _border-right-color: pink;
    _border-left-color: pink;
    _filter: chroma(color=pink);
    z-index:99;
}

.callout .notch_left{
    position: absolute;
    border-right: 0;
   ...

JavaScript

(function($) {
    var methods = {
        init: function(options) {
            var defaults = {
                message: "no message given",
                position: 'top',
                backgroundColor: '#8F8F8F',
                borderColor: '7992B0',
                textColor: '#fff',
            };

            var options = $.extend(defaults, options);

            return this.each(function() {
                var o = options;
                var obj = $(this);
                var msg = o.message;
                var obj_position = obj.position();

                var containerDiv = $('<div class="callout">').append('<b class="notch"></b>' + msg);
                containerDiv.css({
                    'background-color': o.backgroundColor,
                    'border-color': o.borderColor,
                    'color': o.textColor
                });

                //var items = $("li", obj);
                switch (o.position) {
                case "bottom":
                    obj.after(containerDiv);
                    var setLeft = obj_position.left + (obj.width() / 2) - (containerDiv.width() / 2) - 5;
                    var setTop = obj_position.top + obj.height();
                    containerDiv.css({
                        'left': setLeft,
                        'top': setTop
                    });
                    $(".notch", containerDiv).css({
                        'left': (containerDiv.width() / 2) - 5,
                        'border-bottom-color': o.backgroundColor
                    });
                    break;
                case "right":
                    obj.after(containerDiv);
                    $("b.notch", containerDiv).addClass('notch_right').removeClass('notch');
                    var setLeft = obj_position.left + obj.width() + 15;
                    var setTop = obj_position.top + (obj.height() / 2) - (containerDiv.height() / 2) - 10;
                    containerDiv.css({
                        'left':...