Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Balloon Message using JavaScript & CSS in ASP.NET

0.00/5 (No votes)
18 Feb 2015 1  
This is a very simple way to create a balloon message... without using any plugin

Introduction

Most aspects of balloons message can be controlled through the plugin...

In this tip, I will show how to create a balloon message in a simple way using JavaScript & CSS.

Image 1

Using the Code

How to achieve balloon message without using any plugin:

Step A: Find coordinates of control where to show balloon message.

Step A.1: Write function to find coordinates of control like TextBox, dropdown, etc.

JavaScript
function getOffsetRect(elem) 
{
 var box = elem.getBoundingClientRect()
 var body = document.body
 var docElem = document.documentElement

 var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
 var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft

 var clientTop = docElem.clientTop || body.clientTop || 0
 var clientLeft = docElem.clientLeft || body.clientLeft || 0

 var top = box.top + scrollTop - clientTop
 var left = box.left + scrollLeft - clientLeft

 return { top: Math.round(top), left: Math.round(left) }
}

Step A.2: Write a function to show balloon message & validate your control with the help of CSS & JavaScript.

The below function requires three parameters:

  1. ControlID like TextBox, DropDown, etc.
  2. SpanID -->(span tag ID) for adding a hook to a part of a balloon message
  3. Duration -->Hide Error message after specific time 
  4. Error Message
CSS
function RequiredFieldValidation(TextBoxID, SpanID,Duration,ErrorMsg) {
    var j = getOffsetRect(TextBoxID);
    
    AutoHide(SpanID, Duration);

    var Width = TextBoxID.clientWidth + 10 + j.left;
    if (TextBoxID.value == "") {
        SpanID.className = "ShowBubble";
        SpanID.style.top = j.top + "px";
        SpanID.style.left = Width + "px";
        SpanID.innerHTML = ErrorMsg;
        return false;
    }
    return true;
}

CSS-->

.ShowBubble
{
    z-index: 1;
    position: absolute;
    margin-top: -3px;
    padding: 6px 5px;
    background: #ffc477;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 5px;
    width: Auto;
    height: Auto;
    font-style:italic;
}
.HideBubble
{
    display: none;
}
.ShowBubble:after
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 15px 15px 15px 0;
    border-color: transparent #ffc477 transparent;
    display: block;
    width: 0;
    z-index: 1;
    left: -9px;
    top: -1px;
}

If you would like to learn more about JavaScript coordinates, refer to the below link:

History

  • 14th February, 2015: Initial version

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here