On Hover Popup

Questions
,
12

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

<p>{{#Name}}<strong>Account:</strong> {{Name}}{{/Name}}</p>

<p>{{#OwnerId}}<strong>Owner:</strong> {{OwnerId}}{{/OwnerId}}</p>













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