On Hover Popup

Questions
,
24

Same concept can work for hover content:

var showInsightPage = function(event){
if (cellElem[0].childNodes[0].classList[0] !== “InsightText”){
cellElem[0].childNodes[0].setAttribute(“class”, “InsightText”);
var tooltip = document.createElement(‘div’);
tooltip.setAttribute(“class”, “InsightText-tooltip”);

    skuid.$.each(field.metadata.referenceTo,function(){
        fieldprefix = value.substring(0,3);
        if (this.keyPrefix == fieldprefix){
            objectname = this.label.replace(/s+/g, '_').replace('&','and');

    var hoverTemplate = 'SF_Hover_'+objectname;
    var hoverContent = 
        '<includepanel type="skuid" uniqueid="" pagename="'+hoverTemplate+'" module="" querystring="Id='+value+'" showloading="false"/>';
    var includeXML = skuid.utils.makeXMLDoc(hoverContent);
    var include = skuid.component.factory({ definition: includeXML});
    include.element.appendTo(tooltip);        

        }
    });
cellElem[0].childNodes[0].appendChild(tooltip);


}

};

Here’s the CSS along with some Skuid specific tweaks:

.InsightText{
color:#000;
display:inline;
position:relative
}
.InsightText-tooltip{
display:block;
visibility:hidden;
overflow-y:auto;
overflow-x:visible;
box-sizing:border-box;
height:0;
cursor:help;
background:#D6E0E1;
color:#000;
font-size:14px;
z-index:9999;
position:absolute;
width:300px;
border-radius:5px;
box-shadow: 0 2px 2px 0 #6D6E70;
left: 120px;
bottom: 35px;
}
:hover+.InsightText-tooltip{
margin-bottom:0;
height:auto;
visibility:visible;
padding:3px 3px;
z-index:9999;
display: block;
}
.InsightText-tooltip .nx-page{
background:transparent;
}
.InsightText-tooltip .nx-page-content{
background:transparent;
}
.InsightText:hover .InsightText-tooltip{
display: block;
}
.InsightText-tooltip:hover{
display:block;
}
.InsightText-tooltip .nx-basicfieldeditor-section{
margin:0;

}
.InsightText-tooltip .nx-basicfieldeditor-item{
padding:0;
}
.InsightText-tooltip .nx-basicfieldeditor-item-label{
padding: 1px 0 1px 0;
}