Issue with dropdown login form in Bootstrap navbar and tooltip plugin

I’m designing a web site using Bootstrap and I wanted to add a navbar to the top of the page which shows a link to log in and a link to sign up. The sign up link would just lead you to the sign up page, but the log in link should actually reveal a dropdown menu with a log in form, so that you don’t have to load another page to log in.

I tried to write that log in form myself, but it didn’t look pretty well, so I decided to look up some recipe on the internet, and I found this: Adding a Drop Down Login Form to Bootstrap’s Navbar.

After adapting it a bit, I got this piece of code for the navbar and the log in form:

<ul class="nav pull-right">
    <li><a href="#">Profile</a></li>
    <li><a href="#">Settings</a></li>
    
    <li class="divider-vertical"></li>
    
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Log in
            <b class="caret"></b>
        </a>
        <div class="dropdown-menu">
            <form action="/user/login" method="post" accept-charset="UTF-8">
                <input id="username" class="text" type="text" name="username"
                    size="30" placeholder="User name" />
                
                <input id="password" class="text" type="password" name="password"
                    size="30" placeholder="Password" />
                
                <input id="remember_me" class="remember" type="checkbox"
                    name="remember_me" value="1" />
                
                <label class="string optional"
                    for="remember_me"> Keep my session open
                    <i id="login_form_help" class="icon-question-sign" rel="tooltip" title="If you mark this option, we'll keep your session open, so that you won't have to enter your login data again in 30 days. After 30 days without entering the website, you'll have to login again."></i>
                    </label>
                
                <input class="btn btn-primary" type="submit" name="submit"
                    value="Log in" />
            </form>
        </div>
    </li>
    <li>
        <a href="/user/signup">Sign up</a>
    </li>
</ul>

However, I wanted to add a beautiful tooltip to the checkbox, so that it provides useful help for the inexperienced internet users. I decided to use Bootstrap’s tooltip plugin, and place a beautiful Bootstrap question mark icon, but I suddenly ran into an issue: when you hover the question mark with your mouse, the tooltip will be displayed, but beneath the dropdown menu, not on the top of it.

There’s been some discussion on this very same placement issue with tooltips, but only related to modals, not to dropdown menus:

And, thus, there is this simple and clean solution for that issue with tooltips and modals.

But, again, there’s no solution for dropdowns. So here it comes the solution for tooltips and dropdowns:

/*
Fix issue when showing tooltip in navbar login form: tooltip appears underneath the login form
Inspired by https://github.com/twitter/bootstrap/commit/12d3c2fe74bbe2570e47a2c8d7154a3011bd0770
*/

.dropdown-menu {
    z-index: 2050;
}

.tooltip {
    z-index: 2070;
}

Notice that using the .dropdown-menu .tooltip selector for the second CSS rule will actually not work, because the tooltip is added as a child of the body tag, not as a child of the navbar or the dropdown.

PS: I ran into this issue when using Safari to view the page, but I wasn’t trying any other browser at that time. However, when I tried on jsFiddle without the two CSS rules above, the issue didn’t appear anymore. Weird!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: