Demo of Vertical Pointer Tooltip using JQuery

HTML Part is here

<link rel="stylesheet" href="fixed-msg-box.css" type="text/css">
<div id='msg' class='msg'></div>
<br>
<input type=button id=b1 value=Wait> <input type=button id=b2 value='Done'> <input type=button id=b3 value='Error...'>

jQuery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<script>
$(document).ready(function() {

$("#b1").click(function(event){
$("#msg").html('Please wait..');
$("#msg").css("background-color","yellow") // change background colour
$("#msg").css("color","black") // Change font colour
$("#msg").show(); // display the message box
setTimeout(function() { $("#msg").fadeOut('slow'); }, 4000); // Stop displaying after 4 secs
});

$("#b2").click(function(event){
$("#msg").html('Done..');
$("#msg").css({"background-color": "green",'color': '#ffffff'})
$("#msg").show();
setTimeout(function() { $("#msg").fadeOut('slow'); }, 4000);
});

$("#b3").click(function(event){
$("#msg").html("Error..");
$("#msg").css({"background-color": "red",'color': '#ffffff'})
$("#msg").append("<span id='c1' class='close'>X</span>"); // adding a close button
$("#msg").show();
$("#c1").click(function(event){ // Click event of close button
$("#msg").hide(); // Hide the message box
});

});


});
</script>

CSS

.msg{
position: fixed;
top:0%;
right: 50%;
display: none;
FONT-SIZE: 12px;
font-family: Verdana;
width:150px;
}
.close {
float:right;
display:inline-block;
padding:2px 5px;
background:#ccc;
}