HTML ToolTip tutorial - Display hover text over HTML elements such as buttons, images, text, etc.

Usually there is a need to display help text over small icons to better explain its meaning to the user. In addition to that we need hover text for images, sometimes section titles, buttons, etc. Displaying a person's address and phone number when you hover over their name is a very common use of ToolTip. In this tutorial we will go thru various techniques to achieve this using simple HTML, plain Javascript and ExtJs framework. Depending on your programming requirements you can choose what will suit best.



Display ToolTip Hover Text over HTML elements
Display ToolTip Hover Text over HTML elements
Display ToolTip Hover Text over HTML elements

Sample HTML file

<html>
<head>
    <title>ExtJs 4 ToolTip for existing HTML markup</title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <style type="text/css">
        div#myToolTip {
            margin-top:10px;
            margin-bottom:10px;
            margin-right:25px;
            margin-left:25px;
        }
        div {
            margin-bottom:10px;
        }
        div button {
            margin-bottom:10px;
        }
    </style> 
   
    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
     <script type="text/javascript" src="app.js"></script>
    
</head>
<body>
<div id="myToolTip">
    <div id="tooltip1" title="ToolTip displayed over a Paragraph">
        <p>
            <b>Just hover this text and you will get a Tool Tip!</b> 
        </p>
    </div>
    <button type="button" id="tooltip2" title="ToolTip displayed using Title property">
        ToolTip over a button using HTML title property
    </button><br/>
    <button type="button" id="tooltip3">
        ToolTip example using JavaScript
    </button><br/>
    <button type="button" id="tooltip4">
        ToolTip example using ExtJs
    </button><br/>
    <button type="button" id="tooltip5">
        ToolTip rendered from hidden HTML element using ExtJs
    </button><br/> 
    <button type="button" id="tooltip6">
        ToolTip rendered with response from an AJAX request
    </button> 
</div>
<div style="display:none;">
    <div id="displayContent" style="overflow:hidden">
         ToolTip is a Ext.tip.Tip implementation that handles the common case of 
         displaying a tooltip when hovering over a certain element or elements on the page. 
         It allows fine-grained control over the tooltip's alignment relative to the 
         target element or mouse, and the timing of when it is automatically shown and hidden.      
       </div>
</div>
</body>
</html>


Display ToolTip Hover Text over HTML elements
Display ToolTip Hover Text over HTML elements

JavaScript source file with ExtJs framework - app.js

Ext.Loader.setConfig({ 
    enabled: true 
});

Ext.require([
     'Ext.tip.*',
     'Ext.Button'
]);

Ext.application({
    name: 'MyToolTip',

    launch: function() {

        document.getElementById('tooltip3').title = 'This ToolTip was added using Javascript';

        Ext.create('Ext.tip.ToolTip', {
            target: 'tooltip4',
            html: 'Simple ToolTip for my button !'
        });
        Ext.create('Ext.tip.ToolTip', {
            title: '<a href="#">My Tooltip example</a>',
            id: 'content-anchor-tip',
            target: 'tooltip5',
            anchor: 'left',
            html: null,
            width: 415,
            autoHide: false,
            closable: true,
            contentEl: 'displayContent', // load content from here
            listeners: {
                'render': function(){
                    this.header.on('click', function(e){
                        e.stopEvent();
                        Ext.getCmp('content-anchor-tip').hide();
                        console.log('Do something activity here ...');
                    });
                }
            }
        });
        Ext.create('Ext.tip.ToolTip', {
            target: 'tooltip6',
            width: 250,
            loader: {
                url: 'ToolTipRequest'
            },
            listeners: {
                'beforeshow': function(myTip){
                    myTip.getLoader().load({
                        params: {
                            'param1': 'ajaxToolTip',
                            'param2': 'as400samplecode'
                        },
                        callback: function(records, operation, success) {
                            //after the request is complete
                               console.log(success);
                           }
                    });
                }
            }
        });
    }
});


Display ToolTip Hover Text over HTML elements
Display ToolTip Hover Text using ExtJs AJAX request

Java Servlet source code for the AJAX ToolTip Request

package com.as400samplecode;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ToolTipRequest extends HttpServlet {
    private static final long serialVersionUID = 1L;
      
    public ToolTipRequest() {
        super();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       
        String param1 = request.getParameter("param1");
        String param2 = request.getParameter("param2");
       
        PrintWriter out = response.getWriter();
        response.setContentType("text/html");
        out.println("Here is the first parameter: " + param1 + "<br/>");
        out.println("Here is the second parameter: " + param2);
        out.close();
       
    }

}


Display ToolTip Hover Text using ExtJs AJAX request
Display ToolTip Hover Text using ExtJs AJAX request

Tip: Instead of the loader you can use the autoLoad that will just load the HTML automatically and keep it.
The above example is more flexible as you can send different parameters each time and get response based on that from your server to display in the ToolTip. Here is sample code on how to use autoLoad feature
    Ext.create('Ext.tip.ToolTip', {
        target: 'tooltip6',
        width: 250,
  autoLoad: {
   url: 'ToolTipAjaxRequest'
  }
           
    });

No comments:

Post a Comment

NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.