CODEWITHSUNDEEP
jquerycssasp.net-mvctwitter-bootstrap
alex
alex

Reputation: 7443

Bootstrap Tooltips Don't Work

I have an ASP.NET MVC 4 project that includes three buttons with tooltips embedded in a div called "A":

<div class="A">
    <span></span>
    <button type="button" class="btn" data-toggle="tooltip" data-original-title="Default tooltip" title="sdfsdf" id="aButton">A</button>
    <button type="button" class="btn" data-toggle="tooltip" data-original-title="Default tooltip" title="sdljkfl" id="bButton">B</button>
    <button type="button" class="btn" data-toggle="tooltip" data-original-title="Default tooltip" title="sdljkfl" id="cButton">C</button>
</div>

On document.ready, I call this jQuery function:

$(document).ready(function () {
    $('.A .btn').tooltip();
});

No tooltips are displayed. I check my BundleConfig to ensure that bootstrap.js is included:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.11.1.js",
"~/Scripts/jquery-ui-{version}.js",
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*",
"~/Scripts/bootstrap-3.2.0-dist/js/bootstrap.js"));

Yeah, it's there. Why are my tooltips not showing up when I hover my cursor over the buttons?

EDIT: The console now yields the following error: TypeError: $(...).tooltip is not a function. Also, the document.ready function is located at the very bottom of my View. There are no other document.ready functions located anywhere in the View, or its layout. The bundle is called at the top of my View, like so:

@Scripts.Render("~/bundles/modernizr", "~/bundles/jquery", "~/bundles/flot")

Upvotes: 0

Views: 6218

Answers (3)

Camilo G&#243;mez
Camilo G&#243;mez

Reputation: 21

Be sure to include:

<script src="~/Scripts/umd/popper.js"></script>

or 

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

if you prefer to use a CDN

Upvotes: 1

Jared
Jared

Reputation: 245

I had the same issue. There were two issues I had to deal with to get Bootstrap 3.2 Tooltips to work.

1. Make sure you load jQuery.js before you load bootstrap.js.

2. Check your containers and the z-index.

It seems that tooltip defaults to a z-index of 0 from within the element. It was hiding behind my main container. Forcing the tooltip into a higher z-index (I.E. z-index:1;) worked for me.

Add this to your CSS and increase the z-index until it becomes visible.

div[role='tooltip'] {
    position:relative;
    z-index:1;
}

This solution worked for me instantly, albeit I'm using a different framework (Zend/Magento 1.7.0.2).

[edit] The position and z-index was specific to my situation (the default value was being reset from 1060 to 0). I do not recommend doing the same thing unless the code is executing properly and you are still unable to see the tooltip.

Upvotes: 2

Juli&#235;n
Juli&#235;n

Reputation: 9532

Simply put, what you're trying to do works. In order to prove this try the following:

Setup your _Layout.cshtml:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
</head>
<body>

    <div class="container">
        @RenderBody()
    </div>

    <!--
        Note: Register script bundles here...
        Just for the sake of getting it to work, I'm using CDN here
    -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

    <!-- Important: load page-specific scripts *after* the includes above -->
    @RenderSection("Footer", required: false)
</body>
</html>

Then, in the view (Home.cshtml):

@{
    ViewBag.Title = "Home";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container">
    <div class="A">
        <span></span>
        <button type="button" class="btn" data-toggle="tooltip" data-original-title="Default tooltip" title="sdfsdf" id="aButton">A</button>
        <button type="button" class="btn" data-toggle="tooltip" data-original-title="Default tooltip" title="sdljkfl" id="bButton">B</button>
        <button type="button" class="btn" data-toggle="tooltip" data-original-title="Default tooltip" title="sdljkfl" id="cButton">C</button>
    </div>
</div>

@section Footer {
    <script>
        $(document).ready(function () {
            $('.A .btn').tooltip();
        });
    </script>
}

This is copy/paste ready and will work. But there are some things to take into consideration here:

  • Load $(document).ready... after the loading of the scripts; you'll see the custom section "Footer" I've provided in the sample
  • Try debugging it with a CDN first to see if you can get it working; then you can focus on the BundleConfig
  • Last tip is to make sure there's enough 'visual room' to display the tooltips (in your case above the buttons)

Upvotes: 2

Related Questions