Bootstrap tooltip doesn't show style of the tooltip, only data
Question
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:
- Include tooltip.js from external CDN
- activate tooltip throw
<Script>$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});</script> - Add Google API of jQuery (I know is not neccessery)
- 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.
11 answers
solution1
39 2017-03-29 11:35:41
Remember also that Bootstrap Tooltip don't like jQuery UI (there are a few names conflict and 'tooltip' is one of them).
The solution is changing the script loading order: jQuery UI first, bootstrap.js after.
solution2
17 ACCPTED 2014-08-05 19:35:26
Here's a working template for you. My guesses as to what was wrong:
- jQuery always needs to come before bootstrap.js.
- If you don't have a local server running, you need to add the http: to the CDN addresses.
- 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>
solution3
11 2014-08-05 19:35:23
Your problem is more than likely that you failed to initialize the tooltip correctly. Take a look at this bootply
The documents state:
HTML :
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
Jquery :
$("[data-toggle=tooltip").tooltip();
- Remember you only need
bootstrap.min.cssandbootstrap.jsfor the tooltip to work correctly. - Remember to load scripts and style sheets using absolute URLs (add
/in front of path). - bootstrap depends on jquery, load jquery first.
solution4
3 2020-01-03 10:26:03
The OP described precisely the issue I was seeing in Angular 8 with Bootstrap 4.4.1 using JQuery 3.4.1 and not using ng-bootstrap or ngx-bootstrap. The image in the OP is bang on.
Some of the answers were sort of helpful while missing the key point that if the DIV is wrapped in an *ngIf it is difficult to get tooltip() to see that the DIV should have a listener attached to it for mouseenter / mouseleave events. Doing this as the document loads the first time is useless for a single page application where the content is dynamically added and removed.
The critical answer turned up https://github.com/twbs/bootstrap/issues/4215 and codepen https://codepen.io/Johann-S/pen/djJYPb . For me the fix was ...
app.component.ts ... just once in this one file is enough
import { Component } from '@angular/core'
declare var $: any
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.sass']
})
export class AppComponent {
constructor(){
$('body').tooltip({
selector: '[data-toggle="tooltip"]'
})
}
}
and in every place the tooltip should be seen (component.html files for me).
<div data-toggle="tooltip" data-placement="top" title="Tool Tip Text">
Binding to the body allows the tooltip selector to see the addition of any 'new' DOM elements irrespective of the timing.
As to the performance hit ... not sure yet :D, though it is mercifully light on typing.
solution5
1 2014-08-05 19:35:17
Try adding this code at the bottom of your HTML i've needed it to trigger the tooltip to work. Add class="ttop" to your tooltips in HTML code.
$(document).ready(function(){
$(".ttop").tooltip({
placement : 'top'
});
});
solution6
1 2017-09-19 03:59:01
In my case using AngularJS, even all css/js scripts were sequenced/invoked properly but still wasn't showing.
The issue was it's under from a tag with "ng-if" attribute. After I placed it outside from that tag It works fine.
Maybe there's a slight delay with AngularJS rendering the elements with "ng-if" while jquery is initialising the tooltip.
solution7
0 2017-09-04 08:35:48
您必须初始化工具提示，如：
$('[data-toggle="tooltip"]').tooltip()
solution8
0 2017-11-09 19:38:52
If you are using popper.js with bootstrap 4, instead of using:
<script src="~/Scripts/popper.min.js"></script>
use the .js in the UMD directory:
<script src="~/Scripts/umd/popper.min.js"></script>
solution9
0 2018-06-20 11:22:06
All your jquery*.js files must come before bootstrap.js.
jquery-{version}.js
jquery-confirm.min.js
jquery-ui-{version}.js
jquery.validate*
etc...
bootstrap.js
Then use:
<script>
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
solution10
0 2019-11-22 21:54:32
确保您添加bootstrap.min.js并添加
<script> $(document).ready(function () { $('[data-toggle="tooltip"]').tooltip(); }); </script>
solution11
0 2020-06-25 15:50:58
This question has been sufficiently answered, but the solutions don't apply; my links were in good order. Turns out that there's a conflict with Font Awesome (FA). For example, this wouldn't work for me:
<span class="fas fa-search" data-toggle="tooltip" title="Search my site"></span>
If I remove the FA classes, and enter text within the span, the tooltips render in the proper style... but isn't a good solution. However, by encapsulating that span within another span does work:
<span data-toggle="tooltip" title="Search my site"><span class="fas fa-search"></span></span>
I hope this helps the odd soul out there. Or two :^)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.