Detect viewport edges with tooltips, popovers, and dropdowns

[marcalj]

Hi, take a look at this tooltips plugin:
http://osvaldas.info/blog/elegant-css-and-jquery-tooltip-responsive-mobile-friendly

It works perfect positioning tooltips on window borders, not like Twitter Bootstrap!

I'm not sure if it's a CSS or JS issue.

[mdo]

I've long wanted improved viewport edge detection. Unsure if we have this particular aspect file already. @fat, take a look when you can please?

[keilmillerjr]

+1

[fat]

Hey @marcalj,

Thanks for opening this issue! Unfotunately, it looks like it fails to pass the tests neccessary for submitting to bootstrap. The following tests are currently failing:

• should include a jsfiddle/jsbin illustrating the problem if tagged with js but not a feature

For a full list of issue filing guidelines, please refer to the bootstrap issue filing guidelines.

thanks!

[richardp-au]

@fat I think your script needs a little tweaking. Not everything needs a jsFiddle or maybe this should be tagged as a feature instead.

[fat]

yep, should be a feature

[mdo]

Renamed issue to ensure we snag all the applicable components in one pass as this extends beyond tooltips.

[meh]

Any update/ETA on this?

[rafalp]

+1 for this

[nickpresta]

@fat @markdotto any word on this and related issues?

#3637
#3614

An example of this can be seen here: http://twitter.github.com/bootstrap/components.html#dropdowns (hover over the More Options under the submenu section - it renders off the page).

Thank you.

[willit0]

This issue have been there for long time. I was able to fix it with the following code

$(".dropdown-toggle").click(function(e) {
    var menu = $(this).next('.dropdown-menu'),
        mousex = e.pageX + 20, //Get X coodrinates
        mousey = e.pageY + 20, //Get Y coordinates
        menuWidth = menu.width(), //Find width of tooltip
        menuHeight = menu.height(), //Find height of tooltip
        menuVisX = $(window).width() - (mousex + menuWidth), //Distance of element from the right edge of viewport
        menuVisY = $(window).height() - (mousey + menuHeight); //Distance of element from the bottom of viewport

    if (menuVisX < 20) { //If tooltip exceeds the X coordinate of viewport
        menu.css({'left': '-89px'});
    } if (menuVisY < 20) { //If tooltip exceeds the Y coordinate of viewport
        menu.css({
            'top': 'auto',
            'bottom': '100%',
        });
    }
});

I'm not sure how this work, but it's not working on my ipad or mobile.

[andrejbranch]

👍 @willit0

[fat]

Going to pass over to @mdo – need the nw, ne, sw, se, css styles first… then i'll whip up some js real quick

[smajl]

Really looking forward to see this implemented! :) +1 for this

[akhanubis]

+1 for this!

[mdo]

Closing as a dupe of #6713 which has been merged into #6346.

[lieut-data]

I could be mistaken, but in the dupe and merge shuffle, I think the original request to take viewports into account when displaying dropdowns was lost.

[cvrebert]

@lieut-data: I'd advise filing a new issue specifically for dropdowns.

[sloveall]

There's a nice solution for popovers here:
http://stackoverflow.com/questions/9956958/changing-the-position-of-bootstrap-popovers-based-on-the-popovers-x-position-in