tooltip error

[Zeeshan Khan, modificado hace 12 años.]

Hi !

for having tooltip, i am using this JS--->AUI().ready('aui-tooltip', 'aui-io-plugin', function(A) {
var t1 = new A.Tooltip({
trigger: '.t1',
align: { points: [ 'tl', 'tr' ] },
title: true
}).render();
}
);


and at JSps----> <a class="t1 tooltip" href="javascript:void(0);" title="Format Should be MM/DD/YYYY"><img src='<%=renderResponse.encodeURL(renderRequest.getContextPath())%>/img1/help.png' /></a>


but something wierd is happening...please suugest me the solution and refer to the screenshot....
thanks !!

[Mayur Patel, modificado hace 12 años.]

Can you try with this,
<a class="t1" href="javascript:void(0);" title="Format Should be MM/DD/YYYY"><img src='<%=renderResponse.encodeURL(renderRequest.getContextPath())%>/img1/help.png' /></a>

Thanks

[Zeeshan Khan, modificado hace 12 años.]

Mayur Patel:

Can you try with this,
<a class="t1" href="javascript:void(0);" title="Format Should be MM/DD/YYYY"><img src='<%=renderResponse.encodeURL(renderRequest.getContextPath())%>/img1/help.png' /></a>

Thanks

Hi Mayur !!

I tried with ur code......still not working...i dont understand why this weird box i s coming.......please refer to this new screenshot...
thanks !!

[Mayur Patel, modificado hace 12 años.]

If you can try with this demo in any sample portlet and check its working or not.
http://alloy.liferay.com/demos.php?demo=tooltips

It might be affecting with theme css styles, you can try by applying classic theme to that page or check through firebug where weird box is coming

It might be the case that you are testing it on Windows 7 and Google Crome, can you test it same on Windows XP + Firefox?

try it out it works

Thanks

[Zeeshan Khan, modificado hace 12 años.]

Mayur Patel:

If you can try with this demo in any sample portlet and check its working or not.
http://alloy.liferay.com/demos.php?demo=tooltips

It might be affecting with theme css styles, you can try by applying classic theme to that page or check through firebug where weird box is coming

It might be the case that you are testing it on Windows 7 and Google Crome, can you test it same on Windows XP + Firefox?

try it out it works

Thanks

Hi Mayur !

I am using classic theme. I have tested it in XP also and with other browsers too (XP + Firefox), same ugly box is coming.....i have checked through firebug.An extra div is showing may be for that box..where to find that div or that file...???....please find the attached screenshot.....
thanks !!

[Mayur Patel, modificado hace 12 años.]

you have to try it out different ways, AUI Tooltip components add exrta div and style runtime so that is not the problem.

It seems like its opening two tooltip on mouse-over, can you remove icon and try it out by just simple text.

It should work as you can see in demo link

Thanks

[Hitoshi Ozawa, modificado hace 12 años.]

Instead of using a class selector, have you tried using id selector to see what happens?

[Zeeshan Khan, modificado hace 12 años.]

Hitoshi Ozawa:

Instead of using a class selector, have you tried using id selector to see what happens?

Hi Hitoshi !!

are u talking about this-----> <a id="t1 tooltip" href="javascript:void(0);" title="Format Should be MM/DD/YYYY"><img src='<%=renderResponse.encodeURL(renderRequest.getContextPath())%>/img1/help.png' /></a> ???

i tried with this, but no luck...

[anil reddy teripalli, modificado hace 12 años.]

Hi Zeesan,

I got solution for this problem. I modified your code as below,

JSP:

<a class="t1" href="javascript:void(0);" ><img src='<%=renderResponse.encodeURL(renderRequest.getContextPath())%>/img1/help.png' /></a>

JS:

AUI().ready('aui-tooltip', 'aui-io-plugin', function(A) {
var t1 = new A.Tooltip({
trigger: '.t1',
align: { points: [ 'tl', 'tr' ] },
bodyContent: 'Format Should be MM/DD/YYYY'
}).render();
}
);


I tried above code and it's working fine in my machine. Remove the title from the AUI script then only bodyContent works.

[Zeeshan Khan, modificado hace 12 años.]

anil reddy teripalli:

Hi Zeesan,

I got solution for this problem. I modified your code as below,

JSP:

<a class="t1" href="javascript:void(0);" ><img src='<%=renderResponse.encodeURL(renderRequest.getContextPath())%>/img1/help.png' /></a>

JS:

AUI().ready('aui-tooltip', 'aui-io-plugin', function(A) {
var t1 = new A.Tooltip({
trigger: '.t1',
align: { points: [ 'tl', 'tr' ] },
bodyContent: 'Format Should be MM/DD/YYYY'
}).render();
}
);


I tried above code and it's working fine in my machine. Remove the title from the AUI script then only bodyContent works.

Hi Anil !!

thanks for ur reply....i have tried ur code and it works fine only if there is one single tooltip on a page as bodycontent is in JS only...i want to give boducontent from my JSP page and want to centralize the JS code as i did earlier...

thanks !!

[Hitoshi Ozawa, modificado hace 12 años.]

have tried ur code and it works fine only if there is one single tooltip on a page as bodycontent is in JS only...i want to give boducontent from my JSP page and want to centralize the JS code as i did earlier...

That's what I thought. That's why I asked you to try using id instead of class specifier because I thought you had several elements with the same class. You're getting extra box because your script is picking up several elements. I think it'll help if you post your html tags also.

[Zeeshan Khan, modificado hace 12 años.]

Hitoshi Ozawa:

have tried ur code and it works fine only if there is one single tooltip on a page as bodycontent is in JS only...i want to give boducontent from my JSP page and want to centralize the JS code as i did earlier...

That's what I thought. That's why I asked you to try using id instead of class specifier because I thought you had several elements with the same class. You're getting extra box because your script is picking up several elements. I think it'll help if you post your html tags also.

Hi Hitoshi !!

Please find my HTML tags....

<%@ include file="/html/portlet/sample_struts_portlet/init.jsp"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="/html/portlet/sample_struts_portlet/init.jsp"%>

<script>
function displayAccessories(eleId){
if(document.getElementById(eleId).checked){
document.getElementById('accessoriesNon').style.display='block';
document.getElementById(eleId).value=1;
}else{
document.getElementById('accessoriesNon').style.display='none';
document.getElementById(eleId).value=0;
}
}

function getModel(){
var id= document.getElementById('makeStyId').value;
var url = "<%=renderRequest.getContextPath()%>/portlet_action/sample_struts_portlet/getMoter/action?id="+id;
req = initRequest();
req.open("GET", url, true);
req.onreadystatechange = callback;
req.send(null);

}

function initRequest() {
if (window.XMLHttpRequest) {
if (navigator.userAgent.indexOf('MSIE') != -1) {
isIE = true;
}
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
isIE = true;
return new ActiveXObject("Microsoft.XMLHTTP");
}
}

function callback() {
var model =document.quoteDetailForm.modelStyId;
if (req.readyState == 4) {
if (req.status == 200) {
model.length=0;
Opt=document.createElement("OPTION");
Opt.value=" ";
Opt.text="---Select----";
document.quoteDetailForm.modelStyId.options.add(Opt);
var text= req.responseText;
var result=text.split("~");

for(var i=0; i<(result.length);i++){
if(typeof(result)!="undefined" && trim(result)!=""){
lbValue=result.split("@");
Opt=document.createElement("OPTION");
Opt.value=trim(lbValue[0]);
Opt.text=lbValue[1];
document.quoteDetailForm.modelStyId.options.add(Opt);
}
}
}
}
}

function trim(s) {
return s.replace(/^[\s]+/,'').replace(/[\s]+$/,'').replace(/[\s]{2,}/,' ');
}
/*You can also place this code in a separate file and link to it like epoch_classes.js*/
var bas_cal,dp_cal,ms_cal;
window.onload = function () {
dp_cal = new Epoch('epoch_popup','popup',document.getElementById('popup_container'));
displayAccessories('accessoriesRdo');
};
</script>
</head>

<body >
<html:form action="/sample_struts_portlet/quotedetail/action" >
<div class="mainDiv">
<div class="tableDivGetQuot">
<table width="100%" height="100%" border="0">
<tbody>
<tr>
<th class="tableThLeftGrySmallSize" colspan="4" >Provide Basic Vehicle Details</th>
</tr>
<tr>
<td>Make</td>
<td colspan="3">
<html:select property="make" styleId="makeStyId" onchange="getModel()" styleClass="text">
<html:option value="">Select Make</html:option>
<html:optionsCollection property="makeList"/>
</html:select>
<html:errors property="make"/>
</td>
</tr>

<tr>
<td>Model</td>
<td colspan="3" ><html:select property="model" styleId="modelStyId" styleClass="text">
<html:option value="">Select Model</html:option>
<html:optionsCollection property="modelList"/>
</html:select>
<br><html:errors property="model"/>
</td>
</tr>
<tr>
<td>Purchase Year</td>
<td><html:select property="year" styleClass="text" >
<html:option value="">Select year</html:option>
<html:option value="2010">2010</html:option>
<html:option value="2011">2011</html:option>
<html:option value="2012">2012</html:option>

</html:select>
<br><html:errors property="year"/>
</td>
<td>Month</td>
<td>
<html:select property="month" styleClass="text">
<html:option value="">Select month</html:option>
<html:option value="01">January</html:option>
<html:option value="02">February</html:option>
<html:option value="03">March</html:option>
<html:option value="04">Apr</html:option>
<html:option value="05">May</html:option>
<html:option value="06">June</html:option>
<html:option value="07">July</html:option>
<html:option value="08">August</html:option>
<html:option value="09">September</html:option>
<html:option value="10">October</html:option>
<html:option value="11">November</html:option>
<html:option value="12">December</html:option>
</html:select>
<html:errors property="month"/>
</td>
</tr>

<tr>
<td>Registration Location</td>
<td colspan="3" ><html:select property="regCity" styleClass="text">
<html:option value="">Select City</html:option>
<html:optionsCollection property="locationList"/>
</html:select>
<html:errors property="regCity"/>
</td>
</tr>
<tr>
<th colspan="4" class="tableThLeftGrySmallSize">Provide period of insurance</th>
</tr>

<tr>
<td>Policy Start Date</td>
<td colspan="3" ><html:text property="polistartData" styleId="popup_container" /><html:errors property="polistartData"/>
<a class="t1" href="javascript:void(0);" title="Format Should be MM/DD/YYYY" ><img src='<%=renderResponse.encodeURL(renderRequest.getContextPath())%>/img1/help.png' /></a>


</td>
</tr>
<tr>
<td colspan="4" >* Cover ends exactly 1 year from policy start date</td>

</tr>
<tr>
<td colspan="4" >&nbsp;</td>
</tr>
<tr>
<th colspan="4" class="tableThLeftGrySmallSize" >Additional Protection</th>
</tr>
<tr>
<td colspan="3" ><html:checkbox property="flagProtectionForAccessories" styleId="accessoriesRdo" value="1" onclick="displayAccessories('accessoriesRdo')" /> &nbsp;Protection for accessories<a class="t1 tooltip" href="javascript:void(0);" title="Check the box to enter value of accessories"><img src='<%=renderResponse.encodeURL(renderRequest.getContextPath())%>/img1/help.png' /></a></td>
<td colspan="1" >&nbsp;</td>

</tr>

<tr>
<td colspan="4" >
<div id="accessoriesNon" style="display:none ;">
<table>
<tr>
<td colspan="1" >Value of accessories</td>
<td colspan="3" ><html:text property="accessoriesValue" styleClass="text"/></td>
</tr>
</table>
</div>
</td >
</tr>
<tr align="center">
<td colspan="4" align="center"><html:submit property="submit" value="Get Quote" />&nbsp;&nbsp;&nbsp;&nbsp;<html:reset/></td>
</tr>
</tbody>
</table>
</div>
</div>

</html:form>
</body>
</html>

[Anil T, modificado hace 12 años.]

Hi,

I think there was no error in the code.I tried previous code outside of the liferay, I am getting correct results.But when I insert the code into liferay core portlets then only I am getting the same problem.

[Avinash R, modificado hace 10 años.]

I had the similar issue with the tooltip, where the tooltip wasn't even showing up, (I had to show a long text in a table, and using tooltip to show the long text).

In my case, I had too much rows with long text and the tooltip wasn't shown.

I finally managed to fix the issue as follows:

AUI().ready('aui-tooltip', function(A) {
	var elements = A.all("<long-message-selector>");
	elements.each(function () {
		console.log(this);
		new A.Tooltip({
			trigger: this,
			cssClass: 'tooltip-help',
			position: 'bottom',
			bodyContent: this.attr('title')
		}).render();
	});
});
</long-message-selector>

NOTE: replace <long-message-selector> with your selector. also note that if you are not having a long text, then you can omit the

cssClass

.

REF: http://alloyui.com/tutorials/tooltip/