Has anyone implemented a hoverpage capability?

  • 2
  • Question
  • Updated 2 years ago
  • Answered
Is it possible to create a hoverpage for a table element?  Ultimate goal is to have a table display of something like Account.  If you hovered the mouse over the Account Id, the mini page layout would display for that specific accountId.
Photo of Ralph Sr

Ralph Sr

  • 172 Points 100 badge 2x thumb

Posted 2 years ago

  • 2
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
Photo of Thimo

Thimo

  • 1,280 Points 1k badge 2x thumb
Hi a full popup could be difficult.

However, you can create a custom field renderer which creates JQuery UI tooltips that you can customize with html.

It should be something like this:


var field = arguments[0],    fieldValue = arguments[1],
    $ = skuid.$;
$(field).attr('title', generateTooltip());
$(field).addClass('field-with-tooltip');
function generateTooltip() {    var tooltip = '<div class="your-tooltip-content">Everything to display on hover, you can also add field values and model data in here</div>';
    return tooltip;
}
$('.field-with-tooltip').tooltip({    content: function () {
        return $(this).attr('title');
    },
    html: true});


Maybe you could create another Skuidpage and embed an iFrame or maybe even use somehow a page include within that tooltip. But I'm not sure about that.

More reference on styling and positioning that tooltip: https://jqueryui.com/tooltip/
(Edited)