0

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:

enter image description 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."

enter image description here

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:

enter image description here

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.

1 Answer 1

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.

6
  • Zuzuesque, thanks very much for this suggestion! However I have not been able to get it working, no doubt because I am probably missing something or misinterpreting the description. What I have now is a standard tooltip message (small black text, yellow background) rather than a Tipsy tooltip. (Which actually does fulfill the need minimally, but I'm hoping to get the more obvious Tipsy display instead.) [see next comment for continuation of response]
    – Charles
    Jul 11, 2016 at 16:11
  • This smaller tooltip message is displaying only because of the title applied in the Views field "no results" entry; that is currently: <a class="tipsy-tooltip" title="Client confidential, video not allowed for shared showcases." href="#">X</a> [see next comment for continuation of response]
    – Charles
    Jul 11, 2016 at 16:13
  • And in the Tipsy config I have: a.views-field views-field-nothing as the Selector, which I had concluded (from Firebug inspection) was a class identifying the fields where "no results" applies. Not sure about that, and not sure about how to treat the Tipsy config's Tooltip Content area. With other Tipsy configs I had always selected the "Child Element" rather that "HTML Attribute" option. Also had always put the desired Tipsy tooltip text in a div <div class="tipsy-inner">. What am I missing? --Thanks--
    – Charles
    Jul 11, 2016 at 16:14
  • I updated my answer to adress your comments. Hope it becomes clearer now.
    – Zuzuesque
    Jul 12, 2016 at 10:06
  • It is now working as originally intended. Thank you again for your thorough and instructive explanation of how to get control of the CSS factors. Just one other detail that I had to discover is that the Tipsy config "Tooltip Content > Selector" field needed to have the text title entered, in addition to the Custom Selector (left column) field being entered as a.tipsy-tooltip. As you mentioned, the desired tooltip text content is now deriving from the title in the Views "No Results" field, not from the Tipsy config as with more typical Tipsy setups.
    – Charles
    Jul 12, 2016 at 15:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.