I like the your tooltip component. Are there plans for this to support Primefaces tab headers, i.e. generate tooltip based on titletip attribute.
Thanks
==================================================================
Hi,
Glad to hear that you like the tooltip component. What for "titletip" attribute and "tab headers" did you mean? Have you tried "forSelector" in pe:tooltip? You can select any HTML element by "forSelector" (jQuery selector). Figure out the CSS class for tab headers in Firebug and apply it in "forSelector". E.g.
<pe:tooltip value="..." forSelector=".titletip" />
Similar to this example http://fractalsoft.net/primeext-showcas ... oltips.jsf
====================================================================
Thank you for your reply.
Following your advice, I was able to get a shared tooltip to work.
<p:tabView id="tabs" >
...
<p:tab id="studentBackups" title="Remote Edits">
<pe:tooltip forSelector="#tabs li" shared="true" value="Remotely Edited Records"/>
...
However, I would like to have a unique tootip for each tab. This, though, does not seem to work, at least not as done below.
<p:tabView id="tabs" >
...
<p:tab id="studentBackups" title="Remote Edits">
<pe:tooltip for=":tabs:studentBackups" value="Remotely Edited Records"/>
Thank you,
====================================================================
Hi,
Sure, this doesn't work:
<p:tab id="studentBackups" title="Remote Edits">
<pe:tooltip for=":tabs:studentBackups" value="Remotely Edited Records"/>
because p:tab doesn't generate any markup! Therefore, I proposed to look CSS selectors for each tab in Firebug. Something with "studentBackups" (as part of id) should be available in markup.
Good luck.
====================================================================
Hello,
"studentBackups" does appear in the markup, but as part of the id of the tab container:
<div id="tabs:studentBackups" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="false">tab1 content</div>
So I can get the tooltip to work for the tab container, but I would like it to work for the tab header. The header is markedup as follows:
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
<li class="ui-state-default ui-tabs-selected ui-state-active ui-corner-top" role="tab" aria-expanded="true">
<a href="#tabs:studentBackups">Testtab1</a>
</li>
<li class="ui-state-default ui-corner-top" role="tab" aria-expanded="false" title="This is test tab2 tooltip"><a href="#tabs:tab2">testtab2</a>
</li>
</ul>
so, using <pe:tooltip forSelector="(#tabs li" value="tab 1 tip"/> does produce a tooltip for the tab header but the *same* tooltip for all tabs in that tabview.
I can get it working with a modification to org.primefaces.component.tabview -- adding "writer.writeAttribute("id", tab.getClientId(context)+"_header", null);" to the encodeTabHeader method, & then using:
<pe:tooltip forSelector="#tabs:studentBackups_header" value="Tab1 tooltip"/>
I am perhaps missing an easier solution. Thanks again for you help.
====================================================================
Hi,
Try this forSelector:
forSelector="tabs:studentBackups .ui-tabs-nav a[href*='#tabs:studentBackups']"
there are other combinations as well. You should have somethink like at the end of the selector
a[href*='#tabs:tabs2']
There are other possibilities too. You can select li element with JQuery. Simple use parent selector for links (a elements with href) http://api.jquery.com/parent-selector/ Try to set tooltip for a elements at first and then for li elements. jQuery selectors are flexible enough.
Write here what I tried then.
Cheers.
====================================================================
Hello, Thanks!!
I got it to work with <pe:tooltip forSelector='a[href*="#tabs:studentBackups"]:parent' value="Tab1 tooltip"/>
It would not work however if I had the double quotes on the outside.
====================================================================
Fine.
forSelector expects a string. Following syntax is correct:
<pe:tooltip forSelector='a[href*="#tabs:studentBackups"]:parent' .../>
<pe:tooltip forSelector="a[href*='#tabs:studentBackups']:parent" .../>
Cheers.
====================================================================
When I use this syntax, <pe:tooltip forSelector='a[href*="#tabs:tab1"]:parent' .../>, it is rendered like so in the browser:
<script id="j_idt63_s" type="text/javascript">$(function() {widget_j_idt63 = new PrimeFacesExt.widget.Tooltip('j_idt63',{global:false,shared:false, forTarget:'a[href*="#tabs:tab1"]:parent',content:'Tab1 tooltip',show:{event:'mouseenter',delay:0,effect:function(){$(this).fadeIn(500);}},hide:{event:'mouseleave',delay:0,effect:function(){$(this).fadeOut(500);}},position: {at:'bottom right',my:'top left'}});});</script>
However, when I reverse the quotes, <pe:tooltip forSelector="a[href*='#tabs:studentBackups']:parent" .../>, it is rendered like this:
<script id="j_idt63_s" type="text/javascript">$(function() {widget_j_idt63 = new PrimeFacesExt.widget.Tooltip('j_idt63',{global:false,shared:false, forTarget:'a[href*='#tabs:tab1']:parent',content:'Tab1 tooltip',show:{event:'mouseenter',delay:0,effect:function(){$(this).fadeIn(500);}},hide:{event:'mouseleave',delay:0,effect:function(){$(this).fadeOut(500);}},position: {at:'bottom right',my:'top left'}});});</script>
the above results in an error due to the internal & external single quotes.
A slight change in the TooltipRenderer (writer.write(",forTarget:'" + target + "'"); ===>>> writer.write(",forTarget:'" + target.replaceAll("'","\\\\'") + "'"); ) resolves this issue.
Thanks again.
====================================================================
#Ok, thanks. We should write escaped strings. It will be fixed in 0.3.0.
[Moved] Tooltip & tab header
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin
-
- Information
-
Who is online
Users browsing this forum: No registered users and 5 guests