jCallout

 

Script Output

 

$('#test1').jCallout({
    message: "Basic Initialisation with default values"
});
 
                

 

$('#test2').jCallout({
    message: "position changed to right",
    position:"right"
});
 

 


$('#test3').jCallout({
    message: "different colors
text also", position:"left" });  

 

 

 

 

 

 

 

 

multiple elements, one callout
$('.test4').jCallout({
   message: "same callout for both elements",
   position:"top"
});
 

 

 

 

 

 

 

 

 

multiple callouts, one element
$('#test5').jCallout({
   message: "This is first callout<br>We can use breakpoints also",
   position:"left",
   backgroundColor: "#F7F3B1",
   textColor: "#3B3b3B"
}).jCallout({
   message: "This is second callout",
   position:"bottom"
});    
 

 

 

 

With images
    $('#test6').jCallout({
        message: "<img src='http://clipartist.net/
DOWNLOADS/openclipart.org/SVG/Minduka/alert.png>
With image and text. The img tag is<br>directly given in the message",
        position: "right",
        backgroundColor: "#F7F3B1",
        textColor: "#3B3b3B"
    });