How to create animated tool tip container with CSS and jQuery

With JQuery ( light weight, super Java Script library) we can handle events, dynamically add content to html blocks.

Let’s learn to create custom tool-tip container with CSS and jQuery?


jQuery can be placed in a file or with in HTML within <script> </script > , I used to store them as file for easy access. It is a good practice include it in a document ready function, so that we can make sure the query will only execute only when the web page loading completed.

$(function () {
// code block here


In the HTML file very last line of the body (</body>) tag include the script as follows, also you need to include the CDN version or local version of jQuery library.

  <script src="/jquery.js"></script>  -- local version of jQuery library
  <script src="/public/script.js"></script>  -- our script

and the container look like the following (HTML)

 <section class="tool-tip-hide alert text-info" id="ask-tool-tip">            


Here is our CSS code to hide and show the container

    display: none;
    display:inline     ;

jQuery code

 $(function () {
  var info = $("#ask-tool-tip");
  function resetTooltip() {


 async function Message(msg) {
    info.append(`<i>${msg} !</i>`);
    info.addClass("tool-tip-show").fadeOut(3000, () => {
$("#btn-click").on("click", () => {
 Message("Thank you");


In the above jQuery we are done the following

  • locate the container adding class to the HTML ( tool-tip-hide)
  • create custom method for setup message with animation
  • call the Message function inside a event handler

Published by


A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.