问题
I trying add "tooltip bootstrap" to my web site and has fail. It's doesn't work for me, but early i used it and all was fine. Maybe my css styles wrapping some bootstrap styles. Can someone help?
my html
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});@media (min-width: 1024px) and (max-width: 2560px) {
.navbar-custom-header,
.navbar-custom-footer {
background-color: bisque;
margin-bottom: 0px;
width: 100%;
height: auto;
text-align: center;
display: block;
overflow: hidden;
}
.navbar-nav {
float: none;
list-style: none;
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
>li {
display: inline-block;
}
}
.navbar-custom-header .navbar-nav li a:hover {
color: darkgreen;
text-decoration: none;
background-color: bisque;
}
.navbar-custom-footer .navbar-nav li a:hover {
color: darkgreen;
text-decoration: none;
background-color: bisque;
}
.navbar-custom-header .navbar-nav li .nav-ref {
color: white;
font-size: 40px;
font-family: Allegretto Script One;
}
.navi_images {
width: 120px;
height: 60px;
}
@font-face {
font-family: Allegretto Script One;
src: url(fonts/AllegrettoScriptOne.ttf);
}
.footer_images {
width: 280px;
height: 60px;
}
.navbar-custom-header .navbar-nav li a {
padding: 0px 0px 0px 0px;
line-height: 60px;
}
.navbar-custom-footer .navbar-nav li a {
padding: 0px 0px 0px 0px;
line-height: 62px;
}
.navbar-custom-footer .navbar-nav li a .footer_logos {
width: 35px;
height: 35px;
}
.tooltip > .tooltip-inner {
font-family: Allegretto Script One;
font-size: 26px;
}
}<!DOCTYPE html>
<html lang="en">
<title>Главная страница</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta charset="utf-8">
<!-- 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/libs/html5shiv/3.7.0/
html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/
respond.min.js"></script>
<![endif]-->
<!-- Bootstrap source-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<!-- Own style-->
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- Header -->
<nav class="navbar navbar-custom-header" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li><a href="main.html" data-toggle="tooltip" data-placement="bottom" title="Главная страница" class="nav-ref">Main</a>
</li>
<li>
<img class="navi_images" src="images/rose+garland.png" />
</li>
<li><a href="portfolio.html" class="nav-ref" data-toggle="tooltip" data-placement="bottom" title="Портфолио">Portfolio</a>
</li>
<li>
<img class="navi_images" src="images/rose+garland.png" />
</li>
<li><a href="#" class="nav-ref" data-toggle="tooltip" data-placement="bottom" title="Контакты">Contacts</a>
</li>
<li>
<img class="navi_images" src="images/rose+garland.png" />
</li>
<li><a href="#" class="nav-ref" data-toggle="tooltip" data-placement="bottom" title="Отзывы">Reviews</a>
</li>
</ul>
</div>
</nav>
<!-- Main content-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/021.JPG" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/FXUw2IOSk6I.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/kLaceXVf9Iw.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Footer -->
<nav class="navbar navbar-custom-footer" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>
<img src="images/Originals/example.png" class="footer_images">
</li>
<li>
<a href="#" data-toggle="tooltip" data-placement="top" title="Instagram">
<img src="images/insta.png" class="footer_logos">
</a>
</li>
<li>
<a href="https://vk.com/pricheskiotkylikludmilu" data-toggle="tooltip" data-placement="top" title="Vkontakte">
<img src="images/vk.png" class="footer_logos">
</a>
</li>
<li>
<img src="images/Originals/example.png" class="footer_images">
</li>
</ul>
</div>
</nav>
<script src="bootstrap/jquery/jquery-2.2.2.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>回答1:
your code is working . try adding bootstrap from external resources . see snippet below :
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});@media (min-width: 1024px) and (max-width: 2560px) {
.navbar-custom-header, .navbar-custom-footer {
background-color: bisque;
margin-bottom: 0px;
width: 100%;
height: auto;
text-align: center;
display: block;
overflow: hidden;
}
.navbar-nav {
float: none;
list-style: none;
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
>li {
display: inline-block;
}
}
.navbar-custom-header .navbar-nav li a:hover {
color: darkgreen;
text-decoration: none;
background-color: bisque;
}
.navbar-custom-footer .navbar-nav li a:hover {
color: darkgreen;
text-decoration: none;
background-color: bisque;
}
.navbar-custom-header .navbar-nav li .nav-ref {
color: white;
font-size: 40px;
font-family: Allegretto Script One;
}
.navi_images {
width: 120px;
height: 60px;
}
@font-face {
font-family: Allegretto Script One;
src: url(fonts/AllegrettoScriptOne.ttf);
}
.footer_images {
width: 280px;
height: 60px;
}
.navbar-custom-header .navbar-nav li a {
padding: 0px 0px 0px 0px;
line-height: 60px;
}
.navbar-custom-footer .navbar-nav li a {
padding: 0px 0px 0px 0px;
line-height: 62px;
}
.navbar-custom-footer .navbar-nav li a .footer_logos {
width: 35px;
height: 35px;
}
.tooltip > .tooltip-inner {
font-family: Allegretto Script One;
font-size: 26px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-custom-header" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li><a href="main.html" data-toggle="tooltip" data-placement="bottom" title="Главная страница" class="nav-ref">Main</a></li>
<li><img class="navi_images" src="images/rose+garland.png"/></li>
<li><a href="portfolio.html" class="nav-ref" data-toggle="tooltip" data-placement="bottom" title="Портфолио">Portfolio</a></li>
<li><img class="navi_images" src="images/rose+garland.png"/></li>
<li><a href="#" class="nav-ref" data-toggle="tooltip" data-placement="bottom" title="Контакты">Contacts</a></li>
<li><img class="navi_images" src="images/rose+garland.png"/></li>
<li><a href="#" class="nav-ref" data-toggle="tooltip" data-placement="bottom" title="Отзывы">Reviews</a></li>
</ul>
</div>
</nav>
<!-- Main content-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/021.JPG" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/FXUw2IOSk6I.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/kLaceXVf9Iw.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Footer -->
<nav class="navbar navbar-custom-footer" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li><img src="images/Originals/example.png" class="footer_images"></li>
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Instagram"><img src="images/insta.png" class="footer_logos"></a></li>
<li><a href="https://vk.com/pricheskiotkylikludmilu" data-toggle="tooltip" data-placement="top" title="Vkontakte"><img src="images/vk.png" class="footer_logos"></a></li>
<li><img src="images/Originals/example.png" class="footer_images"></li>
</ul>
</div>
</nav>来源：https://stackoverflow.com/questions/39593705/tooltip-bootstrap-doesnt-work