How might one get a conditional display of tooltip or popup message from a rewritten view field?

Question

The issue concerns a View displaying a partial set of fields from a content type "video record," containing a collection of info about videos. One of those items is a Boolean (checked or not checked) indication of whether or not this video is allowed to be added to a user's shareable lists, generated by the module Flag Lists. If it IS shareable (Boolean was checked in full record) then the View displays a checkbox, allowing it to be added to a list. If it's NOT shareable (Boolean was unchecked) then we want to suppress the checkbox and display something else instead; currently that is just an "X" and that is working. Partial display of this here:

The "X" in the View field, a table cell, is the result of a View field rewrite plus display of the text "X" on the condition of "no results."

However we also want to have some form of tooltip/popup message, for hover on the "X," that explains why it's not allowed to be selected. Ideally, if this View field contains "X" then the tooltip would be active; otherwise it wouldn't. Here is a simulation of that:

This is currently working and the tooltip message is generated by the module "Tipsy." However that requires CSS selectors to associate it with the proper item. The only way we can see to use this is to manually add (to Tipsy config) a unique selector for each and every item in the list where this condition applies. Most problematic is that the selectors (as far as I have been able to understand) merely identify a position in the table – so if the table is resorted, they would get out-of-sync.

Can anyone suggest another path for getting to the desired result? That could be either a different way to get the tooltip/popup message that would only be active on the relevant table cell contents, OR maybe backing up farther and presenting the checkbox/no checkbox option a different way, depending on the full content page's condition of shareable/not shareable.

Answer 1

You are actually on a good track - and you can use html in the no result text field. An easy solution to just attach the tooltip to the 'X's would be to add the needed info for tipsy there:

<a class="tipsy-tooltip" title="My tool tip" href="#">X</a>

In the Tipsy module settings you would need to add the appropriate selector in the form of: a.tipsy-tooltip. The selector does not need to be unique - you can use classes instead of ids. That way you can address multiple entries with just one selector.

Selectors are not linked to the position in the table, but rather identify a particular tag. In this case the element the 'a' tag which wraps around X. If the table gets resorted, the tooltip is still attached to the Xs.

---

Edit 1

The Problem might just be your selector: a.views-field views-field-nothing.

CSS classes are interpreted linearly and the order is important. In this case you are telling tipsy to look for a html element views-field-nothing which itself is nested unter a link a with the class views-field. If you look at the inspector though you will see that the actual mark-up is different and probably looks close to this one:

<td class="views-field views-field-nothing">
    <a class="tipsy-tooltip" title="My tool tip" href="#">X</a>
</td>

A link a nested in a element with the classes views-field and views-field-nothing. Tipsy can't convert the default tooltip to a tipsy tooltip because it doesn't find the link to start with.

The correct selector would look like this: .views-field.views-field-nothing a (The missing space between the first two classes is important, as are the dots before the names which indicate they are classes rather than html elements or ids. If you made a space between the first two, it would look for an a-tag nested in a element with the class views-field-nothing which itself is nested under the element with the class views-field.)

Since views-field is a class applied to all fields views outputs you can as well leave it out though and just write .views-field-nothing a

The Problem with views-field-nothing is that it applies to all views and not even just for fields where 'no result' applies - views also uses the same class for fields of the type custom text. To make sure you just target the links you want to turn into tooltips it is easier addressing them with a class on the link itself - e.g. with the a.tipsy-tooltip selector I suggested. It specifically looks for all links with the class tipsy-tooltip so tipsy can extracts their title attribute and uses it for its tooltip text.

You should also pick the 'HTML Attribute' option in this case (Source: 'HTML attribute', Selector: 'title'). The only time you really need to use the 'Child Element' option is when you want to use HTML in the tooltip as you can't do that with the former. With the 'HTML Attribute' option tipsy uses whatever you put as the links title as the tooltip text - no extra classes needed.