搜索
搜索

工具提示引导程序不起作用

O.Kuz 发表于 Dev
52
牛

我试图将“ tooltip bootstrap”添加到我的网站，但失败了。它对我不起作用，但是早期我使用了它，一切都很好。也许我的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>

米海

您的代码正在运行。尝试从外部资源添加引导程序。请参见下面的代码段：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

工具提示不起作用（引导程序）

使用 html 的引导程序 3 工具提示不起作用

关于选择的Twitter引导工具提示不起作用

工具提示不起作用

引导程序不起作用

工具提示的最新更新的引导脚本不起作用

图表上的工具提示不起作用

JavaFX的工具提示showDuration不起作用

Bootstrap工具提示CSS不起作用

Bootstrap 3工具提示不起作用

JavaFX中的工具提示不起作用？

Google Chart工具提示不起作用

高图工具提示不起作用

Fullcalendar中的工具提示不起作用

高图（grouped_category样式）和工具提示格式化程序不起作用

列在引导程序中不起作用

引导程序偏移scrollspy不起作用

引导程序：滑块不起作用

a：悬停不起作用，使用引导程序

引导程序下拉列表不起作用

轮播引导程序不起作用

引导程序：按钮不起作用

Tablesorter Scroller引导程序不起作用

模态引导程序不起作用

引导程序确认将不起作用

引导程序模型不起作用

Symfony，引导程序下拉不起作用？

工具提示内的条件运算符不起作用

按样式设置的工具提示不起作用

TOP 榜单

  1. 1

    Linux的官方Adobe Flash存储库是否已过时？

  2. 2

    如何使用HttpClient的在使用SSL证书，无论多么“糟糕”是

  3. 3

    错误：“ javac”未被识别为内部或外部命令，

  4. 4

    Modbus Python施耐德PM5300

  5. 5

    为什么Object.hashCode（）不遵循Java代码约定

  6. 6

    如何正确比较 scala.xml 节点？

  7. 7

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  8. 8

    在令牌内联程序集错误之前预期为 ')'

  9. 9

    数据表中有多个子行，asp.net核心中来自sql server的数据

  10. 10

    VBA 自动化错误：-2147221080 (800401a8)

  11. 11

    错误TS2365：运算符'！=='无法应用于类型'“（”'和'“）”'

  12. 12

    如何在JavaScript中获取数组的第n个元素？

  13. 13

    检查嵌套列表中的长度是否相同

  14. 14

    如何将sklearn.naive_bayes与（多个）分类功能一起使用？

  15. 15

    ValueError：尝试同时迭代两个列表时，解包的值太多（预期为 2）

  16. 16

    ES5的代理替代

  17. 17

    在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

  18. 18

    如何监视应用程序而不是单个进程的CPU使用率？

  19. 19

    如何检查字符串输入的格式

  20. 20

    解决类Koin的实例时出错

  21. 21

    如何自动选择正确的键盘布局？-仅具有一个键盘布局

热门标签

归档