<img alt="Liferay" height="36" src="http://cdn.www.liferay.com/osb-community-theme/images/custom/heading.png" />

Ranking: Expert

Mensajes: 349

Fecha de incorporación: 20 de julio de 2011

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 !!

archivos adjuntos:

error.png (256,0k)

RE: tooltip error

5 de abril de 2012 2:04

Respuesta

Mayur Patel

Ranking: Regular Member

Mensajes: 243

Fecha de incorporación: 17 de noviembre de 2010

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

Marcar como respuesta

RE: tooltip error

5 de abril de 2012 2:54

Respuesta

Ranking: Expert

Mensajes: 349

Fecha de incorporación: 20 de julio de 2011

Mayur Patel:

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 !!

archivos adjuntos:

error.png (190,1k)

Marcar como respuesta

RE: tooltip error

5 de abril de 2012 4:52

Respuesta

Mayur Patel

Ranking: Regular Member

Mensajes: 243

Fecha de incorporación: 17 de noviembre de 2010

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 emoticon

Thanks

Marcar como respuesta

RE: tooltip error

5 de abril de 2012 5:30

Respuesta

Ranking: Expert

Mensajes: 349

Fecha de incorporación: 20 de julio de 2011

Mayur Patel:

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 !!

archivos adjuntos:

error.png (225,9k)

Marcar como respuesta

RE: tooltip error

5 de abril de 2012 7:03

Respuesta

Mayur Patel

Ranking: Regular Member

Mensajes: 243

Fecha de incorporación: 17 de noviembre de 2010

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

Marcar como respuesta

RE: tooltip error

7 de abril de 2012 6:50

Respuesta

Hitoshi Ozawa

Ranking: Liferay Legend

Mensajes: 8000

Fecha de incorporación: 23 de marzo de 2010

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

Marcar como respuesta

RE: tooltip error

8 de abril de 2012 23:48

Respuesta

Ranking: Expert

Mensajes: 349

Fecha de incorporación: 20 de julio de 2011

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... emoticon

Marcar como respuesta

RE: tooltip error

9 de abril de 2012 2:06

Respuesta

Anil T

Ranking: Junior Member

Mensajes: 46

Fecha de incorporación: 14 de enero de 2012

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.

Marcar como respuesta

RE: tooltip error

9 de abril de 2012 3:33

Respuesta

Ranking: Expert

Mensajes: 349

Fecha de incorporación: 20 de julio de 2011

anil reddy teripalli:

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 !!

Marcar como respuesta

RE: tooltip error

9 de abril de 2012 5:25

Respuesta

Hitoshi Ozawa

Ranking: Liferay Legend

Mensajes: 8000

Fecha de incorporación: 23 de marzo de 2010

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.

Marcar como respuesta

RE: tooltip error

9 de abril de 2012 6:30

Respuesta

Ranking: Expert

Mensajes: 349

Fecha de incorporación: 20 de julio de 2011

Hitoshi Ozawa:

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" > </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')" />  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" > </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" />    <html:reset/></td>
</tr>
</tbody>
</table>
</div>
</div>

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

Marcar como respuesta

RE: tooltip error

10 de abril de 2012 5:44

Respuesta

Anil T

Ranking: Junior Member

Mensajes: 46

Fecha de incorporación: 14 de enero de 2012

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.