Wednesday, June 5, 2024
Homepage · jquery
 Popular · Latest · Hot · Upcoming
133
rated 0 times [  139] [ 6]  / answers: 1 / hits: 48815  / 10 Years ago, tue, august 5, 2014, 12:00:00

Trying to make Bootstrap show the tooltip function, I have followed exactly as Bootstrap DOC about Tooltips and declare my attribute and properties. when I hover over the text the data Some tooltip text! shows as there is alt= function only, but not in style as Bootstrap mentioned in their document.



Steps I have taken to resolve this issue:




  1. Include tooltip.js from external CDN

  2. activate tooltip throw <Script>$('[data-toggle=tooltip]').tooltip({'placement': 'top'});</script>

  3. Add Google API of jQuery (I know is not neccessery)

  4. check if the page is loading the Bootstrap CDN and external ones (All Do!)



Header HTML Markup



<!-- Latest compiled and minified CSS -->

<link rel=stylesheet href=//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css>

<!-- Optional theme -->

<link rel=stylesheet href=//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css>

<!-- Bootstrap -->

<link href=css/bootstrap.min.css rel=stylesheet>

<!-- Custom CSS -->

<link href=css/style.css rel=stylesheet>

<!-- Latest compiled and minified JavaScript -->

<script src=//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js></script>

<script src=//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js></script>


HTML Markup



<a href=# data-toggle=tooltip title=Some tooltip text!>Hover over me</a>


Here is an image of how it shows.



enter


More From » jquery
 Answers
3

Here's a working template for you. My guesses as to what was wrong:




  1. jQuery always needs to come before bootstrap.js.

  2. If you don't have a local server running, you need to add the http: to the CDN addresses.

  3. You may have been trying to initialize the tooltip in the head tags. Problem is that the document probably wasn't ready.



The following works fine.



HTML:



<!DOCTYPE html>

<html lang=en>

  <head>

    <meta charset=utf-8>

    <meta http-equiv=X-UA-Compatible content=IE=edge>

    <meta name=viewport content=width=device-width, initial-scale=1>

    <title>Bootstrap 101 Template</title>



    <!-- Bootstrap -->

    <link rel=stylesheet href=http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css>

    <link rel=stylesheet href=http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css>



    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src=https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js></script>

      <script src=https://oss.maxcdn.com/respond/1.4.2/respond.min.js></script>

    <![endif]-->

  </head>

  <body>

    <a href=# data-toggle=tooltip title=Some tooltip text!>Hover over me</a>



    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src=//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js></script>

    <script>

    $( document ).ready(function() {

        $('[data-toggle=tooltip]').tooltip({'placement': 'top'});

    });

    </script>

  </body>

</html>

[#69898] Monday, August 4, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
reecep
Add To Favorites
Follow
Total Points: 141
Total Questions: 95
Total Answers: 113
Location: Finland
Member since Mon, Nov 8, 2021
3 Years ago
reecep questions
Wed, Dec 8, 21, 00:00, 3 Years ago
Fri, Jul 30, 21, 00:00, 3 Years ago
Wed, Nov 18, 20, 00:00, 4 Years ago
Sat, Mar 14, 20, 00:00, 4 Years ago
Mon, Feb 3, 20, 00:00, 4 Years ago
View All
;