On Hover Popup

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. 

bump

Anyone?

bump

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:

Some Text
 ![](https://us.v-cdn.net/6032350/uploads/attachments/10709-kbgtyk_inline.png "Image: https://d2r1vs3d9006ap.cloudfront.net/s3\_images/1714592/10709-kbgtyk\_inline.png?1520984532")

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

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);  

I think there’s a way to get the row that you’re hovering over.  Try this:

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // figure what row I'm on<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var row = $(this).parents(".nx-item");<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ( row ) {<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var rowData = $(row).data("object");<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(rowData);<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }

This code snippet should be in the hover function (the first one, where it shows the element)

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. 

Yaahoooo! GOT IT! Thanks for the help, Peter!

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

Josef could you post your final solution? Trying to replicate something like this. Thank you both for sharing!

Here’s a sample page. The CSS for the popup is being funky. It used to display right next to the mouse cursor.

&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;













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;
}
if (field.mode == ‘edit’) {
field.element.removeClass(‘hoverText’);
skuid.ui.fieldRenderers[metadata.displaytype]field.mode;
}
(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);

/* 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; }

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);

hi Joseph, thanks for the example. Very helpful! 
I think the css started working for me as expected when adding an .appendTo(‘body’) in the mousemove function.
THanks again! 


Hi Arne


Could you post a working version of a sample skuid page with the hover working? I have struggled with the above and could not get it working.

Thanks

Hi Parminder- are you looking for just the hover or the use of WhatId?


Hi Arne,

I am looking for details on how to implement a hover (as defined in a Wrapper in the example above) when the mouse point passed over another wrapper control and its contents.

I am not sure what you mean by WhatId - It would be useful to pass the value of the record Id field of the data record displayed in the Wrapper the mouse is being moved over to the Hover component - but it is not critical.

Hope this makes sense!

Thanks in advance for your help. I am on the latest version of Spark.

Thank you sir. it helps me alot.

&lt;p&gt;{{#Name}}Account:{{Name}} {{/Name}}&lt;/p&gt; 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;
}
if (field.mode == ‘edit’) {
field.element.removeClass(‘hoverText’);
skuid.ui.fieldRenderers[metadata.displaytype]field.mode;
}
(function(skuid){
var $ = skuid.$;

$(document.body).one(‘pageload’,function() {
var moveLeft = 20;
var moveDown = 10;

$(‘.nx-field.hoverText’).hover(function(e) {
console.log(‘hey i am hovering’);

$ = 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).appendTo('body');

});

});

})(skuid);

/* (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);

/


/
HOVER STYLES */
#hoverText {
display: none;
position: absolute;
width: auto;
padding: 10px;
background: white;
color: #000000;
border: 2px solid #145db3;
font-size: 90%;
z-index: 10000;
box-shadow: 2px 4px 5px 0 #515151;
border-radius: 1em;
}







Hi Parminder, I was goofing around with it but have included (commented out)Josef’s WhatId solution as well. I don’t use the same objects and was just doing proof of concept. lmk if you need the WhatId to work. I will be looking at that shortly. This is working on the latest SPARK APIv1. Cheers