On Hover Popup

Questions
,
5

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