Vista combinada Visión Plana Vista de árbol
Discusiones [ Anterior | Siguiente ]
toggle
Zeeshan Khan
tooltip error
4 de abril de 2012 23:35
Respuesta

Zeeshan Khan

Ranking: Expert

Mensajes: 349

Fecha de incorporación: 20 de julio de 2011

Mensajes recientes

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

archivos adjuntos: error.png (256,0k)
Mayur Patel
RE: tooltip error
5 de abril de 2012 2:04
Respuesta

Mayur Patel

Ranking: Expert

Mensajes: 349

Fecha de incorporación: 17 de noviembre de 2010

Mensajes recientes

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
RE: tooltip error
5 de abril de 2012 2:54
Respuesta

Zeeshan Khan

Ranking: Expert

Mensajes: 349

Fecha de incorporación: 20 de julio de 2011

Mensajes recientes

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

archivos adjuntos: error.png (190,1k)
Mayur Patel
RE: tooltip error
5 de abril de 2012 4:52
Respuesta

Mayur Patel

Ranking: Expert

Mensajes: 349

Fecha de incorporación: 17 de noviembre de 2010

Mensajes recientes

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
Zeeshan Khan
RE: tooltip error
5 de abril de 2012 5:30
Respuesta

Zeeshan Khan

Ranking: Expert

Mensajes: 349

Fecha de incorporación: 20 de julio de 2011

Mensajes recientes

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 emoticon

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

archivos adjuntos: error.png (225,9k)
Mayur Patel
RE: tooltip error
5 de abril de 2012 7:03
Respuesta

Mayur Patel

Ranking: Expert

Mensajes: 349

Fecha de incorporación: 17 de noviembre de 2010

Mensajes recientes

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
RE: tooltip error
7 de abril de 2012 6:50
Respuesta

Hitoshi Ozawa

Ranking: Liferay Legend

Mensajes: 7949

Fecha de incorporación: 23 de marzo de 2010

Mensajes recientes

Instead of using a class selector, have you tried using id selector to see what happens?
Zeeshan Khan
RE: tooltip error
8 de abril de 2012 23:48
Respuesta

Zeeshan Khan

Ranking: Expert

Mensajes: 349

Fecha de incorporación: 20 de julio de 2011

Mensajes recientes

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
Anil T
RE: tooltip error
9 de abril de 2012 2:06
Respuesta

Anil T

Ranking: Expert

Mensajes: 294

Fecha de incorporación: 14 de enero de 2012

Mensajes recientes

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
RE: tooltip error
9 de abril de 2012 3:33
Respuesta

Zeeshan Khan

Ranking: Expert

Mensajes: 349

Fecha de incorporación: 20 de julio de 2011

Mensajes recientes

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
RE: tooltip error
9 de abril de 2012 5:25
Respuesta

Hitoshi Ozawa

Ranking: Liferay Legend

Mensajes: 7949

Fecha de incorporación: 23 de marzo de 2010

Mensajes recientes

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
RE: tooltip error
9 de abril de 2012 6:30
Respuesta

Zeeshan Khan

Ranking: Expert

Mensajes: 349

Fecha de incorporación: 20 de julio de 2011

Mensajes recientes

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
RE: tooltip error
10 de abril de 2012 5:44
Respuesta

Anil T

Ranking: Expert

Mensajes: 294

Fecha de incorporación: 14 de enero de 2012

Mensajes recientes

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
RE: tooltip error
12 de diciembre de 2013 6:00
Respuesta

Avinash R

Ranking: New Member

Mensajes: 13

Fecha de incorporación: 19 de septiembre de 2013

Mensajes recientes

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:

 1
 2AUI().ready('aui-tooltip', function(A) {
 3    var elements = A.all("<long-message-selector>");
 4    elements.each(function () {
 5        console.log(this);
 6        new A.Tooltip({
 7            trigger: this,
 8            cssClass: 'tooltip-help',
 9            position: 'bottom',
10            bodyContent: this.attr('title')
11        }).render();
12    });
13});


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

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