1

I have a tricky question that I cannot wrap my head around:

My web application is using jsf/primefaces for most of its content, and there are lots of information available to the user only via the primefaces - tag. Ie:

<h:outputText id=myText" value="someValue" />
<p:toolTip for="myText">Some describing content</p:toolTip>

Markup would be generated like this:

<span id="parentForm:myText">someValue</span>

<div id="parentForm:j_id_m_5_1_7" class="ui-tooltip ui-widget ui-tooltip-right" style="display: none;">
    <div class="ui-tooltip-arrow">
    </div>

    <div class="ui-tooltip-text ui-shadow ui-corner-all">Some describing content
    </div>
</div>

Where "parentForm" is a generic parameter not related to the case.

div class=ui-tooltip is the tooltip, while the span is

Since the elements that have attached tooltips are many and diverse, is there a global way I can add some style to all those elements that trigger the tooltip (ie if they are <span>s or <label>s or <div>s in the computed code), so that I could signify the items that had tooltips with some kind of differentiating feature? This is probably a js - issue that would need to know what's similar between elements with a tooltip...

Clarification: I want to style the elements that trigger the tooltips, not the tooltips themselves. In the example above, this would be the span, not the div id=ui-tooltip. Not sure how PrimeFaces make their tooltips work...

korgmatose
  • 265
  • 4
  • 17
  • Can you share a snippet of the generated markup? It may be possible to use a selector such as [id^="j_idt"] that will match all elements having an id that starts with the string "j_idt" – Lud Jan 24 '17 at 12:50

1 Answers1

0

I've just ran into the same problem and found the following solution to the problem:

I've added a single global tooltip into the layout. By default, global tooltips works only for the clickable elements a, input and button, but this restriction can be removed with the globalSelector-attribute. I used a global selector that selects all elements that have a data-tooltip-attribute (I have no idea why this isn't the default).

<p:tooltip position="right" globalSelector="[data-tooltip]" />

Styling all elements that have a tootip can be achieved in the same way:

[data-tooltip] {
    background: #ff00ff;
}

Actual tootltips are added with a data-tooltip-attribute (after adding the passthrough-namespace):

<p:outputLabel for="foo" value="Foo" pt:data-tooltip="Bar" />

An nice side effect of this is approach is, that the single global p:tooltip-element is much less cumbersome then adding individual p:tooltip-elements;

toKrause
  • 512
  • 1
  • 4
  • 13
  • You sir are a steely eyed missile man. I've spent the past day and half screwing around with the globalSelector attribute and having absolutely zero luck. This did it, thanks man. – MarkyMarksFunkyBunch May 30 '18 at 19:22