• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

Tooltip on list header

Ok - there is no standard functionality to achieve this in Fabrik.

Option 1 - move Tips in HTML
The headings are rendered in /components/com_fabrik/views/list/tmpl/bootstrap/default_headings.php and the rows in /components/com_fabrik/views/list/tmpl/bootstrap/default_row.php however these just display HTML defined in /components/com_fabrik/models/element.php. So you cannot use template overrides, but instead will need to change core Fabrik files.

If I were doing this, I would:
  1. Extend the "Show tips in list view" option ("rollover" field in /administrator/components/com_fabrik/models/forms/list.xml) in the Element / Publishing / Tips tab so that instead of being "No (0) / Yes (1)" it is instead "No (0) / Rows (1) / Headings (2)".

  2. Update /components/com_fabrik/models/element.php so that it renders the tooltip on the row if the "rollover" attribute is value === 1 and renders it on the heading if the "rollover" attribute === 2.
This would be quite straightforward. If you wanted your updates to be permanent and survive a version update or an update from Github, then you would need to submit a PR with these changes.

Option 2 - move Tips using Javascript
For this you would need to use the List Javascript plugin and write some javascript that would search for the tips on the first row and duplicate them onto the header row, and then to delete the tips from all the rows. This is probably nowhere as straightforward but should be achievable given the right javascript skills and some perseverance. Personally I would not attempt this.
 
@Parcs - I assume you mean you'd like the tip to be displayed in the column header for the element and not the list header itself?

@Sophist - I don't think Option 2 will work. You can't just add/move/create a fabrikTip via javascript. (Or if you can I'd like to know how it can be done.) You have to set the options via php - or change the media/com_fabrik/js/tipsBootStrapMock.js file to accommodate your suggested change to the "Show tips in list view" parameter.

If you want, I can try adding this feature to PR #1958 - 'Improve Element tips functionality and add params for popover width and header'.
I think it's a good idea. (I have requested this myself in the past.)
BTW I've been waiting for some feedback from you regarding that PR for a few weeks now. Please don't tell me that I should expect all my work on that to just be abandoned.:(
 
@Bauer - Option 2 is certainly non-trivial - you would have to remove the post Tip-initialised code from the rows and insert it on the column headings - and you might need to insert it in its initial format and then run Tip initialisation again. But I am confident it would be technically possible - just difficult and messy and possibly leading to screen changes as it is processed.
 
P.S. Creating a PR for option 1 would be welcome, but I don't think you should add it to that PR, but rather start a new one.
 
P.S. Creating a PR for option 1 would be welcome, but I don't think you should add it to that PR, but rather start a new one.
@Bauer - Option 2 is certainly non-trivial - you would have to remove the post Tip-initialised code from the rows and insert it on the column headings - and you might need to insert it in its initial format and then run Tip initialisation again. But I am confident it would be technically possible - just difficult and messy and possibly leading to screen changes as it is processed.
But why do that? That was my solution early on but the flickering tip was very unprofessional looking. (Changing the popup after it 'popped up' once.)

What's wrong with just adding some code to the tipsBootStrapMock.js file that would dynamically move/change the 'top' position of the popover so that it is positioned according to the location of the span in the <TH> rather than the span in the <TD>? (if the new ('2') option is selected in the element Tip "Show tips in list view' parameter)

I've already done and tested this. It works fine with just 4 lines of code added to tipsBootStrapMock.js and one line to add that param to the opts in the tipOpts function in element.php.

I also just found a way of fixing the flickering of popovers when their position causes them to appear over the mouse cursor - which would happen in this case for the top row(s) of the list if the popover was set to show in the 'bottom' position below the label/heading. (That had always bothered me - and I just found the easy fix tonight.)

I'm thinking of holding this off as ransom until/unless that other PR gets added.:p
I have been using those other tip enhancements for over a month now and they work great.
I just need some feedback so I don't get the feeling like I'm talking to the wall.
 

Attachments

  • tipInList.PNG
    tipInList.PNG
    8.2 KB · Views: 26
  • Screen Shot 04-07-18 at 11.14 AM.PNG
    Screen Shot 04-07-18 at 11.14 AM.PNG
    86.2 KB · Views: 27
Last edited:
@skyrun - if you read my post you will see that I looked into this and I don't think you cannot do it by customisation of the template - as that is NOT where the HTML originates. But then again, I may be wrong.

But it does look like a straightforward change to the element model.
 
Thanks everybody for the answers!

@Parcs - I assume you mean you'd like the tip to be displayed in the column header for the element and not the list header itself?
That's exactly what I mean. What I'm looking for is what I can see in the screenshots you posted: the tip on the column header, so that when hovering on the header a user can see the description for the whole column.

I've already done and tested this. It works fine with just 4 lines of code added to tipsBootStrapMock.js and one line to add that param to the opts in the tipOpts function in element.php.
I'd really love to test it too. Could you give me the code and point me where to put it? That'll be really appreciated, since I'm not a developer.

Thanks again
 
Thanks everybody for the answers!


That's exactly what I mean. What I'm looking for is what I can see in the screenshots you posted: the tip on the column header, so that when hovering on the header a user can see the description for the whole column.


I'd really love to test it too. Could you give me the code and point me where to put it? That'll be really appreciated, since I'm not a developer.

Thanks again
Hmm... Actually, in the pic I provided, the popover is triggered by a hover over the element itself, in each row - just as it had always been if 'Show tips in list view' was selected.

Let me work on what you want - where hovering over the column heading would show the tip. That would require an entirely different approach.

But then, any Tip test that used the 'Eval' option to evaluate the tip text as PHP code, might not get displayed as expected if that php code provided conditions that would display a different tip text, depending on the value of the element (or any element) in that row.

So if the new 'Heading' option was used for 'Show tips in list view?' the Eval'd code from the first row in the list would have to (always) be be used. I suppose that would be fine so long as the user was aware of that rule - i.e. how it works.
 
@Bauer - if you are going to make this as a proper option, if you think my option 1 approach is ok then why not follow it.
Yeah, I came up with a way of using "the best of both worlds". (see attachment)

The problem with putting the trigger in the header is that the 'fabrikTip' class and options that are needed/used in tipsBootStrapMock.js are all set in the element.php file - on an element by element level.

Like I said, you can't just (dynamically, using javascript) add the fabrikTip class and move the opts attributes from the element span into the column header and it will magically work - It just doesn't work that way.

The only way I could think of to make it work like that would be to use the list javascript to insert the needed eventListener in the column header of elements that use option 3 (Header / Header) - and change the tip position to use the header (th) rather then the cell (td) containing the element.

Something like this...
JavaScript:
    requirejs(['fab/fabrik'], function () {
        jQuery("#list_283_com_fabrik_283 tbody tr.fabrik_row:first").find("td.fabrik_element span.fabrikTip").each( function(idx, el) {
            var tipjson = jQuery(this).context.attributes[1].nodeValue;
            var tipobj = JSON.parse(tipjson);

            if (tipobj.listTip == "3") {
                var thIndex = jQuery(this)["0"].offsetParent.cellIndex;
                var thSpan = jQuery(this).closest("table")["0"].childNodes["1"].children["0"].children[thIndex].children["0"];

                thSpan.addEventListener("mouseover", function(el2){
                    var pos = [];
                    pos.left = el2.pageX;
                    pos.top = thSpan.parentElement.offsetParent.offsetTop;
                    pos.width = el2.relatedTarget.offsetWidth;
                    pos.height = el2.relatedTarget.offsetHeight;
                    window.fabrikTipPos = pos;
                    jQuery(el).trigger('mouseover');
                });

                thSpan.addEventListener("mouseout", function(){
                    jQuery(el).trigger('mouseout');  
                    delete window.fabrikTipPos;            
                });
            }

        });

    });

Making just this one change without the other changes I made to tips would be a waste of my time.
I spent much of my day today adding these changes to that same code I had already created for the PR that has been sitting at Github (#1958) and I tested it and it all works as expected. I have NOT yet changed the PR. But one change/method doesn't work without the other, sorry.

In addition to the checkboxes options shown in the image attached, I also changed the mouseover tip to: "Show tips in list view? - If so, select mouse hover trigger and tip location".
 

Attachments

  • tipxml.PNG
    tipxml.PNG
    21 KB · Views: 19
Last edited:
Option 1 - update element.php model to put the exact same tooltip code on the column header instead of the row if the setting is Header not Row.
 
Option 1 - update element.php model to put the exact same tooltip code on the column header instead of the row if the setting is Header not Row.
You make it sound so easy.
Can you explain how I would put the code in the column header of a list via element.php?

In a list view, by the time element.php is called, the column header has already been rendered. That's why I did it via javascript (by triggering a mouseover on the element when there is a mousover on the column header). Then tipsBootStrapMock.js determines/handles the location of the popover (and returns false so there is no popover when the mouse hovers over the element). It's ugly, I know - but it works.

I'm wondering if I can't eliminate the need for putting that javascript (shown in my last post) directly in the tipsBootSrapMock.js file - so the user would not have to add it to a list_x.js file. I'm assuming you would consider that the only acceptable way for this to work. (Unless you can figure out how to do it the way you suggest - and add the fabrikTip class and proper opts in the column header via php code somewhere.)
 
In element.php there are two methods - one which creates the HTML for the list row (which should include the code for the tooltip) and one for creating the list column header. I would find the tooltip code in the list row method and copy it to the column heading method then add code to both to check the value of the element tooltip in list setting so that it only appears in one or the other. Quick change to the XML file and language strings to change No (0) / Yes (1) to No (0) / Rows (1) / Heading (2) and job done.

Probably not quite that straight forward - bound to be some wrinkles, because this is Fabrik - but still pretty straight forward.
 
In element.php there are two methods - one which creates the HTML for the list row (which should include the code for the tooltip) and one for creating the list column header.
Are you sure about that? Can you point me to the exact 2 functions in the PlgFabrik_Element class (element.php) you are talking about?

I can see where the html for the tooltip is created and rendered - but, as far as I can see, that is done on a per element level, not a list row level. And I don't see anything in element.php "for creating the list column header".:confused:
 
yes - per element per row. So different tooltip for every element. I will take a look at the file and give you pointers.
 
Sorry about the delay. Ok. I think I was right about being able to do this entirely in /components/com_fabrik/models/element.php.

List Header HTML is defined in getListHeading() at c. line 1673.

The tip HTML is defined in tipTextAndValidations() at c. line 1897.

The element row data is defined in renderListData() at c. line 6169.

If it were me I would extend the use of $mode in isTipped() at c. line 1639 so that it could take values "form", "list" and now "listhead".

So in /administrator/components/com_fabrik/models/forms/element.xml you change the options for "labelinlist" from No (0) / Yes (1) to No(0) / Rows (1) / Heading (2).

Then towards the end of isTipped you change:
PHP:
if ($mode === 'list' && $params->get('labelinlist', false) == false)
{
   return false;
}
to:
PHP:
if ($mode === 'list' && $params->get('labelinlist', 0) !== 1)
{
   return false;
}
if ($mode === 'listhead' && $params->get('labelinlist', 0) !== 2)
{
   return false;
}

Then you add a call to tipTextAndValidations or similar into getListHeading - obviously this is the tricky but to copy the correct code.

And that should hopefully do it.
 
Hi, first of all: sorry if I come back on this thread after all this time. I had to freeze the project for which I needed these information, and I can resume it only now.
Second: thank you so much for all the work you did trying to solve this issue.
I read all the discussion trying to apply your suggestions, when you first posted and even now, with no luck at all: my fault, for I am not a developer and I am not able to test your solutions, even if I try to follow the instructions.
So, if you'll ever have time to guide me step by step on which code I should use and where to put it, I would be so grateful.
If you can't I'd understand, so thanks for the time spent till now anyway.
 
If you need further help applying this suggestion, please ask. I do not have the time right now to code and test this as a PR, but if you need a few minutes to help you make it work, let me know. Alternatively, you might like to ask @Bauer to code and test this or pay for Hugh to do it.
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top