- QTIP2 is JQUERY library for creating tool tip.
- It supports Asynchronous display of tool tip.
- The plugin JS file can be downloaded from :-
http://craigsworks.com/projects/qtip2/download/
- Demo , In this demo A servlet is called through AJAX , the response of the call is displayed in the tool tip.
- The Project Structure (Qtip2JavaIntegrationDemo) is,
- The java object Student.java ,
package com.sandeep.data.object;
public class Student {
private String name;
private String mark;
private String roll;
private String adress;
private String phoneno;
public String getRoll() {
return roll;
}
public void setRoll(String roll) {
this.roll = roll;
}
public String getAdress() {
return adress;
}
public void setAdress(String adress) {
this.adress = adress;
}
public String getPhoneno() {
return phoneno;
}
public void setPhoneno(String phoneno) {
this.phoneno = phoneno;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getMark() {
return mark;
}
public void setMark(String mark) {
this.mark = mark;
}
}
- The Data Service for students are StudentDataService.java ,
package com.sandeep.data.service;
import java.util.ArrayList;
import java.util.List;
import com.sandeep.data.object.Student;
public class StudentDataService {
/**
* Demo Data set
* @return
*/
public static List<Student> getStudentList() {
List<Student> listOfStudent = new ArrayList<Student>();
Student s1 = new Student();
s1.setName("Sandeep");
s1.setMark("200");
s1.setAdress("Chennai India");
s1.setPhoneno("+91- 123456789");
s1.setRoll("S04");
listOfStudent.add(s1);
Student s2 = new Student();
s2.setName("Sumanta");
s2.setMark("200");
s2.setAdress("Pune India");
s2.setPhoneno("+91- 523456789");
s2.setRoll("S02");
listOfStudent.add(s2);
Student s3 = new Student();
s3.setName("Sangeeta");
s3.setMark("500");
s3.setAdress("Bangalore India");
s3.setPhoneno("+91- 923456789");
s3.setRoll("S01");
listOfStudent.add(s3);
Student s4 = new Student();
s4.setName("Surabhi");
s4.setMark("125");
s4.setAdress("Chennai India");
s4.setPhoneno("+91- 823456789");
s4.setRoll("S03");
listOfStudent.add(s4);
return listOfStudent;
}
/**
* Returns the student with the given roll No
* @param rollNo
* @return
*/
public static Student getStudentWithRoll(String rollNo){
List<Student> listOfStudent = getStudentList();
Student targetStudent =null;
for(Student student:listOfStudent){
if(student.getRoll().equalsIgnoreCase(rollNo)){
targetStudent = student;
break;
}else{
continue;
}
}
return targetStudent;
}
}
package com.sandeep.qtip.servlet;
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;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.sandeep.data.object.Student;
import com.sandeep.data.service.StudentDataService;
public class Qtip2StudentDataServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public Qtip2StudentDataServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json");
PrintWriter out = response.getWriter();
String roll = request.getParameter("roll");
Student aStudent = StudentDataService.getStudentWithRoll(roll);
Gson gson = new GsonBuilder().setPrettyPrinting().create();
String json = gson.toJson(aStudent);
out.print(json);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}
- The HTML Code for tool tip is qtip2-demo.html ,
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./css/jquery.qtip.min.css" type="text/css" media="screen" />
<title>Qtip2 Demo With Ajax Call</title>
<style>
.students-detail {
width:400px;
color:grey;
text-align: justify;
}
.student-name {
color :blue;
cursor:pointer;
}
.qtip-default {
border: 7px solid Orange;
border-radius: 70px 70px 70px 70px;
}
.qtip-content {
border: 7px solid green;
border-radius: 70px 70px 70px 70px;
}
.response-student {
border: 3px solid red;
border-radius: 70px 70px 70px 70px;
list-style: none outside none;
padding: 20px;
}
.name-style {
color: orange;
font-style: italic;
font-weight: bold;
font-size: 20px
}
.mark-style {
color: violet;
font-style: italic;
font-weight: bold;
}
.roll-style {
color: Grey;
font-style: italic;
font-weight: bold;
}
.ad-style {
color: brown;
font-style: italic;
font-weight: bold;
}
.phone-style {
color: green;
font-style: italic;
font-weight: bold;
}
</style>
</head>
<body>
<p id="students-detail" class="students-detail">There are five students enrolled in this course.There final result came for this course. Their position in the exam are <span class="student-name" roll="S01">Sangeeta</span>,<span class="student-name" roll="S02">Sumanta</span>, <span class="student-name"
roll="S03">Surabhi</span> and <span class="student-name" roll="S04">Sandeep</span>. Sangeeta got Highest mark in the exam.lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem
ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar.</p>
<script
src="./js/jquery-1.9.0.min.js"></script>
<script src="./js/jquery.qtip.min.js"></script>
<script>
$(document).ready(function () {
$('span.student-name').each(function () {
$(this).qtip({
content: {
text: '<img src="./image/ajax-loader.gif" alt="Loading..." />',
ajax: {
url: './Qtip2StudentDataServlet',
type: 'GET',
data: {
roll: $(this).attr('roll')
},
dataType: 'json',
success: function (data, status) {
var content = new Array();
content.push("<ul class='response-student'>");
content.push("<li class='name-style'>" + data.name + "</li>");
content.push("<li class='mark-style'>Mark : " + data.mark + "</li>");
content.push("<li class='roll-style'>Roll : " + data.roll + "</li>");
content.push("<li class='ad-style'>Address : " + data.adress + "</li>");
content.push("<li class='phone-style'>Phone : " + data.phoneno + "</li>");
content.push("</ul>");
this.set('content.text', content.join(""));
}
}
},
position: {
at: 'bottom center',
my: 'top center',
viewport: $(window),
effect: false
},
show: {
event: 'click',
solo: false
},
hide: 'unfocus',
style: {
classes: 'qtip-light qtip-shadow'
}
})
})
});
</script>
</body>
</html>
- The response format for Student object is in JSON,
{
"name": "Sandeep",
"mark": "200",
"roll": "S04",
"adress": "Chennai India",
"phoneno": "+91- 123456789"
}
- The Firebug inspection for HTML markup created by QTIP2 is,
- The AJAX call for servlet in firebug console,
- The Loading output is,
- The output is showing details of student ,
Code Download:-
https://docs.google.com/file/d/0B0LM6Azr0Y0XNWg3aWM2Q0FCb2s/edit?usp=sharing
