Question

有没有人知道为什么我的工具提示不起作用？

HTML代码：

<div class="form-check">
          <label class="form-check-label" >
            <input type="radio" class="form-check-input" name="optionsRadios" 
            id="has-been" value="has-been" (click)='onRadioClick(2)'> Has-Been
            <i class="fa fa-question-circle" aria-hidden="true" 
            data-toggle="tooltip" data-placement="right" title=""></i>
          </label>

        </div>

我从index.html导入的bootstrap文件

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"
    crossorigin="anonymous">
    <link href="css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://bootswatch.com/_vendor/popper.js/dist/umd/popper.min.js">
  <link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous">
    </script>

我使用bootswatch主题是一个问题吗？

修改来自here

的工具提示

编辑2： 我添加了完整的index.html。我想根据上面的图片改变工具提示的外观。目前我只有默认的文字外观。

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>UniApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"
    crossorigin="anonymous">
  <link rel="stylesheet" href="//bootswatch.com/4/flatly/bootstrap.min.css">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

</head>

<body>

  <app-root></app-root>

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

  <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4"
    crossorigin="anonymous"></script>

  <script>
    $(document).ready(function () {
      $('[data-toggle="tooltip"]').tooltip();
    });
  </script>
<!-- 
  <script>
    $(function () {
      $('[data-toggle="tooltip"]').tooltip();
    });  
  </script> -->


</body>

</html>

Answer 1

因此，第一步我们需要清理代码。你正在加载Bootstrap 3和Bootstrap 4，你将不得不选择一个。您还多次加载jQuery和Popper，并且您的包含顺序不正确。

如果我们清理您的代码以支持Bootstrap 4并根据他们的文档订购内容，您将获得以下代码：

$(function(){
  $('[data-toggle="tooltip"]').tooltip(); 
});

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" href="//bootswatch.com/4/flatly/bootstrap.min.css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

<div class="form-check">
  <label class="form-check-label" >
    <input type="radio" class="form-check-input" name="optionsRadios" id="has-been" value="has-been" (click)='onRadioClick(2)'>
    Has-Been
    <i class="fa fa-question-circle" aria-hidden="true" data-toggle="tooltip" data-placement="right" title="Test"></i>
  </label>
</div>

注意：现在触发工具提示的唯一原因是因为title中存在实际值。在您显示的代码中，title为空，因此工具提示从未触发过。

Bootswatch似乎根本不会影响tooltip组件的外观，至少不会影响您正在使用的Flatly主题。

Answer 2

添加：

<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip(); 
    });  
</script>

并输入标题

顺便说一下，你使用bootstrap 4 css和bootstrap 3 js

<link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous">

Bootstrap - 工具提示不起作用（使用bootswatch）

2 个答案: