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!

mpdaugherty · Accepted Answer · 2012-04-23 11:24:44Z

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.

answered Apr 23, 2012 at 11:24

mpdaugherty

1,1808 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mpdaugherty Over a year ago

The enter: function above may need a little tweaking to select the right element; as I said, I haven't used either library, and this is untested.

mstef Over a year ago

This is definitely what is causing the problem, having nanoScroller target the right element is still an issue. Hopefully I can work through that piece. Have tried a lot of variations of .find(), as well as changing the class of the original html after the tooltip is generated, and using the parent div to target it, all failed. Thanks

Collectives™ on Stack Overflow

Custom jQuery scrollbar inside jQuery tooltip

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related