2016-09-20 5 views
0

私のウェブサイトに「ツールチップブートストラップ」を追加しようとして失敗しました。それは私のためには機能しませんが、早く私はそれを使用して、すべてうまくいきました。たぶん私のCSSスタイルはいくつかのブートストラップスタイルをラップしています。助けてもらえますか?ツールチップブートストラップが機能しません

私の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>

答えて

3

。外部リソースからブートストラップを追加してみてください。

$(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>

:下のスニペット見ます
関連する問題