Custom jQuery scrollbar inside jQuery tooltip

Question

I'm using nanoscroller.js and tiptip.js , although for my question I'm not sure specific libraries matter that much (but they may).

I have a working tool tip, I have a working scrollbar. When used seperately.

My goal is to have a working custom scrollbar inside the tooltip.

HTML:

<a class="tooltip">Open tooltip</a>

<div class="tooltip-html" style="display:none;">
    <div id="main-content" class="nano">
        <div class="Content">
            <div class="blue">
            </div>
        </div>
    </div>
</div>

JS:

var tip_html = $('.tooltip-html').html();
$('.tooltip').tipTip({activation: 'click', maxWidth: "230px", defaultPosition: "bottom", keepAlive: true, content: tip_html });
$("#main-content.nano").nanoScroller();

First thing I noticed about the above: With this arrangement the nanoscroller was only applied to the first set of html, not the set that is in the tooltip.

So I then applied the scrollbar first before grabbing the html and adding it to the tooltip, this applied the scrollbar to the tooltip but it wasn't functional.

Tried a lot of different approaches here (applying the scrollbar to every id that matched, different order of when to call which, etc), and I'm definitely stuck. Any help is appreciated, thanks!

Answer 1

Without having used either of those libraries, my guess is that what tiptip does is create a copy of the DOM node, and that nanoScroller saves some reference to the node to which it is applied.

Combined, these these two behaviors could cause what you're seeing: $(#mail-content.nano) will always point to the original HTML, and if you copy the HTML after adding the scroller, the scrollbar may still be trying to scroll the original node.

Therefore, you may want to try adding nanoScroller after the tipTip is created. Something like this (untested):

var tip_html = $('.tooltip-html').html();
$('.tooltip').tipTip({
    activation: 'click',
    maxWidth: "230px",
    defaultPosition: "bottom",
    keepAlive: true,
    content: tip_html,
    enter: function () {
        $(this).find("div.nano").nanoScroller();
    }
});

This uses the enter property of tipTip to add a function that's executed when the tip is opened, which then adds the nanoScroller to the new DOM elements.