p:tooltip not showing, simple example

[rfwalker]

hi all, i am in process of moving from richfaces 4 to pf3.2, and on my first page, a simple login page i am stuck with a pf tooltip now showing as expected

for example,

Code: Select all

<p:panel id="panelId">                                
     <h:graphicImage id="helpIcon" name="help.png" library="images"  style="border:none;margin-top:-25px;" title="Enter your user id"/>									
     <p:tooltip for="helpIcon" /> <!--  will use title of target component -->                                  
</p:panel> 

this works great in firefox (v12), see here http://www.akersacademy.com/robert/ie_tooltip3.png
but does not show graphic help icon IE (v8) see here
http://www.akersacademy.com/robert/ie_tooltip.png

I also tried to use the more conventional value attribute
<p:tooltip for="helpIcon" value="Enter your user id"/> but that results in a tooltip text being display all the time in firefox and IE, see here http://www.akersacademy.com/robert/ie_tooltip2.png


any ideas pf users? my conversion from rf4 to pf3.2 is off to a rough start

[T.dot]

When I look at your screenshoots it looks more like the whole image is missing in IE? Is the image shown without the tooltip?

You can also check out the css/html of the image with IE developer tools.

[rfwalker]

thanks for the reply, yes, IE does have the code to support the image (see src code for IE below), and selecting the image in developer tools does highlite an image box, but IE is not showing the actual help icon, it is like a transparent image. and you know when you right click on img in IE, you have the menu item save picture as, whcih id do for other images on this login page, but for the invisible image, IE does not give me that save image as menu item, kinda telling me IE is confused about it. removing the <p:tooltip for="helpIcon" /> gets IE showing the img as expected.

Code: Select all

<tr>
                            <td>User Id:</td>
                            <td><input id="loginForm:user" type="text" name="loginForm:user" value="" size="20" /></td>
                            <td>
                                    <img id="loginForm:helpIcon" 
                                         src="/VdasMySqlPrimefaces/javax.faces.resource/help.png.jsf?ln=images" 
                                         style="border:none;margin-top:-25px;" />
                                    <div id="loginForm:j_idt21" 
                                            class="ui-tooltip ui-widget ui-widget-content ui-corner-all">
                                                  Enter your USWIN user id
                                    </div>
                                    <script id="loginForm:j_idt21_s" type="text/javascript">$(function() {PrimeFaces.cw('Tooltip','widget_loginForm_j_idt21',{id:'loginForm:j_idt21',target:'loginForm:helpIcon',showEffect:'fade',hideEffect:'fade'});});
                                     </script>                                                                      
                            </td>                            
</tr> 

[kukeltje]

What mime-type is returned by your server for this image? And check if ie is not running in compatibility mode

[rfwalker]

you got to be kidding me, i turned off compatibility mode, and it shows the icon

thanks for the suggestion, at first i thought, what the heck is that gonna do, lame suggestion
then when i did a search and found related topics about IE not showing content
and it's compatibility mode, i looked in my settings and it was on.

thanks all, u guys are great

[kukeltje]

you got to be kidding me, i turned off compatibility mode, and it shows the icon

thanks for the suggestion, at first i thought, what the heck is that gonna do, lame suggestion

I may sometimes be hard in my suggestions/comments, but never stupid or lame