On Hover Popup

edited April 29, 2019 in Questions
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. 

Comments

  • edited March 13, 2018
    bump
  • edited March 6, 2018
    Anyone?
  • edited March 13, 2018
    bump
  • Peter HalePeter Hale ✭✭
    edited April 29, 2019
    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>
    image
    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
  • edited September 20, 2018
    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);  
  • Peter HalePeter Hale ✭✭
    edited March 14, 2018
    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);
                    }
  • Peter HalePeter Hale ✭✭
    edited March 14, 2018
    This code snippet should be in the hover function (the first one, where it shows the element)
  • edited March 15, 2018
    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. 
  • edited September 20, 2018
    Yaahoooo! GOT IT! Thanks for the help, Peter! 

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

    image
  • Jack SanfordJack Sanford San Antonio, TX 💎💎
    edited April 29, 2019
    Josef could you post your final solution? Trying to replicate something like this. Thank you both for sharing!
  • edited September 20, 2018
    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>

  • edited March 28, 2019
    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);


  • Arne-Per HeurbergArne-Per Heurberg ✭✭✭✭
    edited March 28, 2019
    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! 
  • edited April 27, 2019

    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
  • Arne-Per HeurbergArne-Per Heurberg ✭✭✭✭
    edited April 27, 2019
    Hi Parminder- are you looking for just the hover or the use of WhatId?
  • edited April 28, 2019

    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.
  • edited April 29, 2019
    Thank you sir. it helps me alot.
  • Arne-Per HeurbergArne-Per Heurberg ✭✭✭✭
    edited April 29, 2019
    <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" sobject="Opportunity">
    <fields>
    <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" sobject="Account" doclone="">
    <fields>
    <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" snippet="accountTooltip"/>
    <field id="StageName" hideable="true" uniqueid="fi-3ueFJk-473" snippet="accountTooltip" type="CUSTOM"/>
    <field id="OwnerId" hideable="true" uniqueid="fi-3ueFJl-475"/>
    </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-31rd-545" model="Account_Tooltip">
    <contents>&lt;p&gt;{{#Name}}Account:{{Name}} {{/Name}}&lt;/p&gt;
    </contents>
    </richtext>
    </components>
    <styles>
    <styleitem type="background" bgtype="none"/>
    <styleitem type="border"/>
    <styleitem type="size" height="collapse" width="full"/>
    </styles>
    <interactions/>
    <renderconditions logictype="and"/>
    </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.$;

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

    </jsitem>
    <jsitem location="inlinesnippet" name="newSnippet" cachelocation="false">/* (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);

    */</jsitem>
    </javascript>
    <css>
    <cssitem location="inline" name="onHoverCSS" cachelocation="false">/* 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;
    }
    </cssitem>
    </css>
    <actionsequences uniqueid="sk-3ud-PP-310"/>
    </resources>
    <styles>
    <styleitem type="background" bgtype="none"/>
    </styles>
    </skuidpage>

  • Arne-Per HeurbergArne-Per Heurberg ✭✭✭✭
    edited April 29, 2019
    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
  • John DahlbergJohn Dahlberg ✭✭✭✭
    edited April 29, 2019
    For those wishing to get more sophisticated with the WhatId, here's a code segment that identifies the object type from a polymorphic field within a Field Snippet.  This uses Skuid's API to match the field's lookup value from the available objects within the lookup field.  That makes it dynamic and agnostic to the object selected within the lookup field.  That way you don't have to specify the object structure in the javascript.  This also works for other polymorphic field like owner and File lookup references.   

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

    We use this to dynamically render include pages in hover and popup displays, similar to Salesforce Classic native hover content.  With consistent naming conventions, you can leverage a generalized utility to work across Salesforce's object structure.  Here's an example of generating a popup utility based on dynamically determining the object type and passing it as a variable to another snippet:

            skuid.snippet.getSnippet('PopupPageInclude')({
                row: field.row,
                model: field.model,
                name:  fielddisplay,
                fieldId: value,
                objname: objectname,
                template: objectname+'Detail',
            });

    Here's the generalized popup utility (PopupPageInclude Snippet), which will work for any Salesforce object where there's a matching page defined: 

    var context = arguments[0];
    var popupXMLString = 
    '<popup title="'+context.objname.replace(/_/g, ' ')+': '+context.name+'" width="90%">'
    + '<components>'
    +'<includepanel type="skuid" uniqueid="popupPageInclude" pagename="SF_'+context.template+'" module="" querystring="Id='+context.fieldId+'" showloading="false"/>'
    +'</components>'
    +'</popup>';
    var popupXML = skuid.utils.makeXMLDoc(popupXMLString);
    popup = skuid.utils.createPopupFromPopupXML(popupXML);


    To get this to work, you would also need pages defined that can receive an Id parameter and be titled accordingly:

    SF_OpportunityDetail
    SF_CampaignDetail
    SF_UserDetail
    etc.
  • John DahlbergJohn Dahlberg ✭✭✭✭
    edited April 29, 2019
     One callout is that the replace functions convert the objectname to a more usable string by replacing spaces with underscores and swapping out the "&" character (i.e. D&B company), which will cause an XML error.
  • Arne-Per HeurbergArne-Per Heurberg ✭✭✭✭
    edited April 29, 2019
    thanks John. That is on the menu for this week :)

  • John DahlbergJohn Dahlberg ✭✭✭✭
    edited April 29, 2019
    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;
    }
  • John DahlbergJohn Dahlberg ✭✭✭✭
    edited April 29, 2019
    Also - add this to the snippet:

    field.element.on('click',"a",showPopupPageInclude);
  • John DahlbergJohn Dahlberg ✭✭✭✭
    edited April 30, 2019
    Sorry - wrong function. this is the hover one:

    field.element.on('mouseover',"a",showInsightPage);
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!