Tooltip for field in row (or entire row)

  • 1
  • Question
  • Updated 4 years ago
We currently have a table that requires a lot of columns (namely pricing/cost/margin type fields) and it's too much to expect the user to have to scroll horizontally through these. Is it possible to provide a tooltip rollover for a field or entire row that can show contextual data for said field/row? I'd rather not have to use a pop up, as it'll save time being able to hover the mouse over and get the required info.
Photo of Oliver Sinfield

Oliver Sinfield

  • 922 Points 500 badge 2x thumb

Posted 4 years ago

  • 1
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Hi Oliver,

Was just thinking the same thing a couple of days ago.  Can you send me a screenshot of a table where/how you see this working?  Annotate the screenshot to demonstrate the idea.  

Have you explored the idea of using row drawers?  You can expand the row inline using a drawer to show extended information.

Regards,
Irvin
Photo of Oliver Sinfield

Oliver Sinfield

  • 922 Points 500 badge 2x thumb
See in the screenshot attached, we have a lot more information we'd like to be able to quickly see (shown are example fields) and I would prefer if a user could simply hover over the 2nd quote line to see what's in the drawer contents rather than have to move the pointer to the drawer button and click on/off.

Here's an example
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
A quick jQuery solution anyone? 
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Oliver, I plan to tackle tomorrow as I need a similar capability.  Will post my solution afterwards.
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Hi, Meetings and more meetings got in the way of exploring a solution.  Still plan to tackle but maybe another day or two before I can post a full solution.  Meantime, take a look at this; may give you some ideas.  http://iamceege.github.io/tooltipster/
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Rob,  How do I get access to the row item in focus so that I can dynamically update the content?

(function(skuid){	

var $ = skuid.$;
function registerTooltip() {
   $('tr.nx-item').poshytip({
        followCursor: true,
        slide: false,
        content: function(updateCallback){
           var item = $(this);
           console.log('item: ' + item);
           return 'Hey, this must be dynamic content!';
        }
        });
}
$('.nx-page').one('pageload', function() {
        registerTooltip();
    });
    
})(skuid);
Photo of Oliver Sinfield

Oliver Sinfield

  • 922 Points 500 badge 2x thumb
Did you get anywhere with this Irvin?
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Hey Oliver, I had an open question to the Skuid dev team.

Skuid team / Anyone, Any insight would be appreciated.

Thanks in advance,
Irvin