[Moved] Tooltip & tab header

Community Driven Extensions Project
Post Reply
User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

24 Feb 2012, 16:08

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

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests