HTML help/info control

Given below is code to show help information next to controls(like textbox, dropdownlist etc). This will show help info next to the control “onfocus” event. This feature can be attached to other events also like “onmouseover”,”onclick” etc.

The control will look like this - 

Set the script and style in html head

<script>

    var prevmsgControlName;

    var timeoutVar;

    function showControlMessage(control, msg) {

        var msgControlName = 'message_' + control.id;

        if (prevmsgControlName) {

            document.getElementById(prevmsgControlName).style.display = "none";

        }

        if (document.getElementById(msgControlName) == null) {

            var tempDiv = document.createElement("div");

            tempDiv.id = msgControlName;

            var rect = control.getBoundingClientRect();

            tempDiv.innerHTML = msg;

            tempDiv.className = "client_message";

            tempDiv.style.left = Number(rect.left + control.offsetWidth + 5) + "px";

            tempDiv.style.top = rect.top + "px";

            control.parentNode.appendChild(tempDiv);

            clearTimeout(timeoutVar);

            timeoutVar = setTimeout(hideControlMessage, 8000);

            prevmsgControlName = msgControlName;

        }

        else {

            clearTimeout(timeoutVar);

            document.getElementById(msgControlName).style.display = "block";

            timeoutVar = setTimeout(hideControlMessage, 8000);

            prevmsgControlName = msgControlName;

        }

    }

    function hideControlMessage() {

        clearTimeout(timeoutVar);

        document.getElementById(prevmsgControlName).style.display = "none";

    }

</script>

<style>

.client_message {

    border:1px solid black;

    background-color:rgb(250, 250, 188);

    padding:5px;

    position:absolute;

    font-size:90%;

    width: 300px;

    border-radius:2px;

}

</style>

Once the script and style are set in head, you can add help info to control as given below.

<input id="control1" type="text" onfocus="showControlMessage(this,'Replace with help info you want to show for the control')" />