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.
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>
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);
}
});
}
}
});
}
});
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();
}
}
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.