On Hover Popup

  • 3
  • Question
  • Updated 2 months ago
  • Answered
I've looked at a few other community posts, but I was wondering if anyone has some samples of on hover popups.  

I'm trying to create a on hover display for the reference field list using "li.ui-menu-item" but it's not working. I'm referencing .hover() https://api.jquery.com/hover/

Any help is appreciated. 
Photo of Josef Lagorio

Josef Lagorio

  • 2,874 Points 2k badge 2x thumb

Posted 9 months ago

  • 3
Photo of Josef Lagorio

Josef Lagorio

  • 2,874 Points 2k badge 2x thumb
bump
Photo of Josef Lagorio

Josef Lagorio

  • 2,874 Points 2k badge 2x thumb
Anyone?
Photo of Josef Lagorio

Josef Lagorio

  • 2,874 Points 2k badge 2x thumb
bump
Photo of Peter Hale

Peter Hale, Employee

  • 330 Points 250 badge 2x thumb
I found a lilttle hover popup tutorial here:
http://creativeindividual.co.uk/2011/02/create-a-pop-up-div-in-jquery/

I then used that example to update a template field in a table to implement it.  Here's what I did:

1. Put a wrapper at the bottom below the table with a little Rich Text editor with some text to show in the popup.
2. Rename the Unique ID of the wrapper.  For example "hoverText"
3. Add an In-line JS snippet to have the following:
(function(skuid){
var $ = skuid.$;
$(document.body).one('pageload',function(){

$(".hoverDiv").hover(
            function(e) {
                $("#hoverText").show()
                  .css('top', e.pageY)
                  .css('left', e.pageX)
                  .appendTo('body');
              }, function() {
                $("#hoverText").hide();
              }     
);
});
})(skuid);
4.  Add a template field to a table (or whereever you want the popup to appear with the following in the template:
<div class="hoverDiv">Some Text</div>

This is what my example looks like when I hover over my "Some Text" template.  I'm sure you can have many different variations here, but this could be a good start.


For the li.ui-menu-item, try doing an inspection to see if you're using the right element
Photo of Josef Lagorio

Josef Lagorio

  • 2,772 Points 2k badge 2x thumb
Thanks so much for the tutorial link and the walk-through! That's helped immensely! I have just one final question before I go on my way and that is, how  can I grab a row parameter via an onHover action? I've modified my Inline, but my page is having a hard time recognizing row.WhatId. I'm essentially trying to pass the hovered ID to a model and then activate that models condition to display in the tooltip.

 Is something like this possible? 

PS. if I hardcode the var oppId to an opportunities ID the rest of the javascript works so I think imcloseish. 
(function(skuid){
var $ = skuid.$;

$(function() {
  var moveLeft = 20;
  var moveDown = 10;

  $(".nx-field.hoverText").hover(function(e) {
    var params = arguments[0],
    row = params.item.row;
    
    var oppId = row.WhatId;
	var model = skuid.model.getModel('opportunityPopUp');
	var idFilter = model.getConditionByName('Id',false);

    model.setCondition(idFilter, oppId);
	model.updateData();
	console.log(idFilter);
	console.log(row);

    $("#hoverText").show();
  }, function() {
    $("#hoverText").hide();
  });

  $(".nx-field.hoverText").mousemove(function(e) {
    $("#hoverText").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
  });

});
})(skuid);  
(Edited)
Photo of Peter Hale

Peter Hale, Employee

  • 330 Points 250 badge 2x thumb
I think there's a way to get the row that you're hovering over.  Try this:
                // figure what row I'm on
                var row = $(this).parents(".nx-item");
                if ( row ) {
                    var rowData = $(row).data("object");
                    console.log(rowData);
                }
Photo of Peter Hale

Peter Hale, Employee

  • 330 Points 250 badge 2x thumb
This code snippet should be in the hover function (the first one, where it shows the element)
Photo of Josef Lagorio

Josef Lagorio

  • 2,772 Points 2k badge 2x thumb
Hmm...seems to be working well but no matter what I try, I cannot target the WhatId. I've tried looping through the object to grab the WhatId but that doesnt work either. 

I think
var rowObjectData = Object.values(rowData);
gets me closed, but still can't figure out how to go down one more level. 
Photo of Josef Lagorio

Josef Lagorio

  • 2,772 Points 2k badge 2x thumb
Yaahoooo! GOT IT! Thanks for the help, Peter! 

var whatid = rowData.row.WhatId; did the trick! 

(Edited)
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
Josef could you post your final solution? Trying to replicate something like this. Thank you both for sharing!
Photo of Josef Lagorio

Josef Lagorio

  • 2,852 Points 2k badge 2x thumb
Here's a sample page. The CSS for the popup is being funky. It used to display right next to the mouse cursor. 

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true" theme="Classic">
    <models>
        <model id="Opporunity" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" type="" sobject="Opportunity">
            <fields>
                <field id="RecordTypeId"/>
                <field id="Name"/>
                <field id="StageName"/>
                <field id="OwnerId"/>
                <field id="Owner.Name"/>
                <field id="AccountId"/>
                <field id="Account.Name"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
        <model id="Account_Tooltip" limit="1" query="false" createrowifnonefound="false" datasource="salesforce" type="" sobject="Account" doclone="">
            <fields>
                <field id="RecordTypeId"/>
                <field id="Id"/>
                <field id="Name"/>
                <field id="OwnerId"/>
                <field id="Owner.Name"/>
                <field id="Type"/>
            </fields>
            <conditions>
                <condition type="fieldvalue" value="" enclosevalueinquotes="true" field="Id" state="filterableoff" inactive="true" name="Id"/>
            </conditions>
            <actions/>
        </model>
    </models>
    <components>
        <skootable showconditions="true" showsavecancel="true" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" alwaysresetpagination="false" createrecords="true" model="Opporunity" buttonposition="" mode="read" allowcolumnreordering="true" responsive="true" uniqueid="sk-3ue6_n-357">
            <fields>
                <field id="Name" hideable="true" uniqueid="fi-3ueFJl-474" valuehalign="" type=""/>
                <field id="AccountId" hideable="true" uniqueid="fi-3ueY1G-676" valuehalign="" type="CUSTOM" snippet="accountTooltip"/>
                <field id="StageName" hideable="true" uniqueid="fi-3ueFJk-473" valuehalign="" type=""/>
                <field id="OwnerId" hideable="true" uniqueid="fi-3ueFJl-475" valuehalign="" type=""/>
            </fields>
            <rowactions>
                <action type="edit"/>
                <action type="delete"/>
            </rowactions>
            <massactions usefirstitemasdefault="true">
                <action type="massupdate"/>
                <action type="massdelete"/>
            </massactions>
            <views>
                <view type="standard"/>
            </views>
        </skootable>
        <wrapper uniqueid="hoverText" cssclass="hoverText">
            <components>
                <richtext multiple="false" uniqueid="sk-3uiCHD-461" model="Account_Tooltip">
                    <contents>&lt;p&gt;{{#Name}}&lt;strong&gt;Account:&lt;/strong&gt; {{Name}}{{/Name}}&lt;/p&gt;

&lt;p&gt;{{#OwnerId}}&lt;strong&gt;Owner:&lt;/strong&gt; {{OwnerId}}{{/OwnerId}}&lt;/p&gt;
</contents>
                </richtext>
            </components>
            <styles>
                <styleitem type="background"/>
                <styleitem type="border"/>
                <styleitem type="size"/>
            </styles>
        </wrapper>
    </components>
    <resources>
        <labels/>
        <javascript>
            <jsitem location="inlinesnippet" name="accountTooltip" cachelocation="false">field = arguments[0];
var value = skuid.utils.decodeHTML(arguments[1]), 
metadata = field.metadata, 
$ = skuid.$; 

// Run the standard renderer and add a CSS class for tooltip
if (field.mode == 'read') { 
    field.element.addClass('hoverText');
    skuid.ui.fieldRenderers[metadata.displaytype][field.mode](field,value); 
}
if (field.mode == 'edit') {
    field.element.removeClass('hoverText');
    skuid.ui.fieldRenderers[metadata.displaytype][field.mode](field,value); 
}</jsitem>
            <jsitem location="inline" name="onHoverAccountPopUp" cachelocation="false" url="">(function(skuid){
var $ = skuid.$;
$(function() {
  var moveLeft = 20;
  var moveDown = 10;
 
  $(".nx-field.hoverText").hover(function(e) {
    $ = skuid.$;
    
    var row = $
    (this).parents(".nx-item");

    var rowData = $ (row).data("object");
        if (row) {
            var accountId= rowData.row.AccountId;
            var accountModel = skuid.model.getModel('Account_Tooltip');
        var IdFilter = accountModel.getConditionByName('Id',false);

            //Set the Model Condition
            accountModel.setCondition(IdFilter, accountId);
            accountModel.updateData();
        }
      
    if (rowData.mode == 'read')  { 
      $('#hoverText').show(); 
    }}, 
    
    function() {
    $("#hoverText").hide();
    });

  $(".nx-field.hoverText").mousemove(function(e) {
    $("#hoverText").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
   });

});

})(skuid);

</jsitem>
        </javascript>
        <css>
            <cssitem location="inline" name="onHoverCSS" cachelocation="false">/* HOVER STYLES */
div#hoverText {
  display: none;
  position: absolute;
  width: auto;
  padding-left: 5px;
  padding-right: 5px;
  background: white;
  color: #000000;
  border: 2px solid #145db3;
  font-size: 90%;
  z-index: 10000;
  box-shadow: 2px 4px 5px 0px #515151;
  border-radius: 1em;
}
</cssitem>
        </css>
        <actionsequences uniqueid="sk-3ud-PP-310"/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>

Photo of Josef Lagorio

Josef Lagorio

  • 2,852 Points 2k badge 2x thumb
Here is my Inline Javascript that is used on the "WhatId" event field

(function(skuid){
var $ = skuid.$;
$(function() {
  var moveLeft = 20;
  var moveDown = 10;
 
  $(".nx-field.hoverText").hover(function(e) {
    $ = skuid.$;
    
    var row = $
    (this).parents(".nx-item");

    var rowData = $ (row).data("object");
        if (row) {
            
            //var rowData = $ (row).data("object");
            var whatid = rowData.row.WhatId;
            var refString = String(whatid);
            var refLength = refString.substring(0, 3);
            
            var oppModel = skuid.model.getModel('opportunityPopUp');
        var oppidFilter = oppModel.getConditionByName('Id',false);
            var accountModel = skuid.model.getModel('accountPopUp');
            var accountidFilter = accountModel.getConditionByName('Id',false);
            var campaignModel = skuid.model.getModel('campaignPopUp');
            var campaignidFilter = campaignModel.getConditionByName('Id',false);

            if (refLength === "006"){
                
                    //Remove the Account and Campaign Model's conditions
                    campaignModel.setCondition(campaignidFilter, "null");
                campaignModel.updateData();
                accountModel.setCondition(accountidFilter, "null");
                accountModel.updateData();
               
                //Set the Opp Model Condition
                    oppModel.setCondition(oppidFilter, whatid);
                    oppModel.updateData();
                    }
            
            //Determine if the row's related to is an Account and update the accountPopup model
            else if (refLength === "001") {
                    
                    //Remove the Opp and Campaign Model's conditions
                oppModel.setCondition(oppidFilter, "null");
                oppModel.updateData();
                campaignModel.setCondition(campaignidFilter, "null");
                campaignModel.updateData();
               
                //Set the Account Model Condition
                accountModel.setCondition(accountidFilter, whatid);
                    accountModel.updateData();
                        
                    }

            //Determine if the row's related to is an Campaign and update the campaignPopup model
            else if (refLength === "701") {
                
                    //Remove the Opp and Account Model's conditions
                oppModel.setCondition(oppidFilter, "null");
                oppModel.updateData();
                accountModel.setCondition(accountidFilter, "null");
                accountModel.updateData();
               
                    //Set the Campaign Model Condition
                    campaignModel.setCondition(campaignidFilter, whatid);
                    campaignModel.updateData();
                    }
        }
        
    if (rowData.mode == 'read')  { 
      $('#hoverText').show(); 
    }}, 
    
    function() {
    $("#hoverText").hide();
    });

  $(".nx-field.hoverText").mousemove(function(e) {
    $("#hoverText").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
   });

});

})(skuid);