Pages Navigation Menu

Coding is much easier than you think

AJAX Tooltip in Java Web Application using qTip2 jQuery plugin

This article discusses AJAX Tooltip in Java Web Application using qTip2 jQuery plugin. This library is used for creating Asynchronous display of tool tip.

Library required


Project Structure

Now Create a dynamic web project in Eclipse with following folder structure
qTip2 Project structure

Set up from browser perspective: jQuery qTip2

Jsp form which ToolTip via ajax

<!DOCTYPE html>
<link rel="stylesheet" href="./css/jquery.qtip.min.css" type="text/css" media="screen"/>
<title>AJAX Tool tip using qTip2 jQuery plugin</title>
.qtip-content {
	border: 1px solid grey;

.student-name {
	color: blue;
	cursor: pointer;

.name-style {
	font-weight: bold;
	font-size: 14px

.style {
	font-weight: bold;
<h2>Qtip2 Demo With Ajax Call</h2>

<h3>Student Details</h3>
	<p >
		<span class="student-name" id="1" >Mohaideen</span> <br>
		<span class="student-name" id="2">Ameer</span> <br>
		<span class="student-name" id="3">Badru</span> <br>
		<span class="student-name" id="4">Prabhu</span>

<script src="./js/jquery-1.9.0.min.js"></script>
<script src="./js/jquery.qtip.min.js"></script>
		content: {
		text: '<img  src="./image/loading.gif" alt="Loading..." />',
		ajax: {
			url: './Qtip2Servlet',
			type: 'GET', 
			data: {id  :$(this).attr('id')}, 
			dataType: 'json',
			success: function(data, status) {
		 	   var content = new Array();
			   content.push("<div class='name-style'>""</div><br>");
			   content.push("<div class='style'>Mark : "+data.mark+"</div>");
			   content.push("<div class='style'>Roll : ""</div>");
			   content.push("<div class='style'>Address : "+data.address+"</div>");
			   content.push("<div class='style'>Phone : "+data.phoneNo+"</div>");
			   this.set('content.text', content.join(""));

			position: {				
				at: 'bottom center', 
				my: 'top center',
				viewport: $(window),
				effect: true

			show: {
				event: 'mouseover',
				solo: true 
			hide: 'unfocus',
			style: {
				classes: 'qtip-light'

The JQuery code written on the head section of the jsp page is responsible for the AJAX call made to the servlet.
Another must read:
jQuery form validation using jQuery Validation plugin
jQuery Tutorial for Beginners

From the server’s perspective: Servlet

In Servlet, I’m going to use a GSON library to convert Java objects to JSON strings that will be parsed by JQuery in the JSP page and will be displayed on the web page and note that I have returned the response back to jsp based on the value of ‘id’ parameter which i pass to the servlet via jQuery’s ajax() method.

Servlet implementation


package servlet;


import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import model.Student;
import service.StudentService;

public class Qtip2StudentServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

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

		String id = request.getParameter("id");
		Student student = StudentService.getStudentWithId(id);

		String json = new Gson().toJson(student);


Model class


package model;

public class Student {

	private String name;
	private String mark;
	private String id;
	private String address;
	private String phoneNo;

	public String getName() {
		return name;

	public String getMark() {
		return mark;

	public String getId() {
		return id;

	public String getAddress() {
		return address;

	public String getPhoneNo() {
		return phoneNo;

	public void setName(String name) { = name;

	public void setMark(String mark) {
		this.mark = mark;

	public void setId(String id) { = id;

	public void setAddress(String address) {
		this.address = address;

	public void setPhoneNo(String phoneNo) {
		this.phoneNo = phoneNo;


Business class

This Business Service class which provides static data using model class.

package service;

import java.util.ArrayList;
import java.util.List;

import model.Student;

public class StudentService {

	public static List<Student> getStudentList() {

		List<Student> listOfStudent = new ArrayList<Student>();

		Student s1 = new Student();
		s1.setAddress("Chennai India");
		s1.setPhoneNo("+91- 123456789");

		Student s2 = new Student();
		s2.setAddress("Kolkatta India");
		s2.setPhoneNo("+91- 542789");

		Student s3 = new Student();
		s3.setAddress("Bangalore India");
		s3.setPhoneNo("+91- 123456");

		Student s4 = new Student();
		s4.setAddress("Vizag India");
		s4.setPhoneNo("+91- 6789012");

		return listOfStudent;


	public static Student getStudentWithId(String id) {

		List<Student> listOfStudent = getStudentList();

		Student targetStudent = null;

		for (Student student : listOfStudent) {

			if (student.getId().equalsIgnoreCase(id)) {
				targetStudent = student;
			} else {
		return targetStudent;



Make sure you have done servlet mapping properly in web.xml file. An example of this is given below,




While loading tooltip from server side, a simple loading image gets displayed as below.
Once the data is loaded from server side via ajax, that data is displayed in the browser as shown below.


About Mohaideen Jamil

I'm a Full stack developer of IT exp in J2EE, AngularJs, MicroServices, Docker, Spring (Boot, MVC, Cloud), Bluemix, DevOps. Follow me on Facebook or Google Plus. If you like my tutorials, consider making a donation to this charity, thanks.

%d bloggers like this: