Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tooltip arrow misplacement when using viewport option #16506

Closed
mateuszjarzewski opened this issue May 19, 2015 · 2 comments
Closed

Tooltip arrow misplacement when using viewport option #16506

mateuszjarzewski opened this issue May 19, 2015 · 2 comments
Labels
js

Comments

@mateuszjarzewski
Copy link

Hi!
When using tooltop with viewport option, I get arrow misplacement
Below code and screenshot.
To reproduce bug, scroll your page down untill button will touch very bottom of the screen, then hover button.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/less">
        body {
            padding-top: 1000px;
        }
    </style>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js"></script>
    <script type="text/javascript">
        less.env = 'development'
        less.poll = 5000
        // less.watch()
    </script>
    </head>
<body>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip">
        Tooltip
    </button>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script>
        $('[data-toggle="tooltip"]')
            .tooltip({
                placement: 'right',
                viewport:   { selector: 'body', padding: 20 },
            })
    </script>
</body>
</html>

tooltip-arrow-misplacement

Or maybe it should behave like that?
Anyhow, cheers!
@cvrebert cvrebert added the js label May 19, 2015
@cvrebert
Copy link
Collaborator

@fat Is this WontFix per #15627 (comment) ?

@mdo
Copy link
Member

mdo commented Jun 18, 2015

Punting as a won't fix—v4 includes a new positioning library for our affix, tooltips, and popovers.

@mdo mdo closed this as completed Jun 18, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
js
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@mdo @cvrebert @mateuszjarzewski