Bootstrap工具提示不显示工具提示的样式，仅显示数据 [英] Bootstrap tooltip doesn't show style of the tooltip, only data

问题描述

试图让Bootstrap显示工具提示功能，我完全按照 Bootstrap DOC 关于< a href =http://getbootstrap.com/javascript/#tooltips =nofollow noreferrer>工具提示并声明我的属性和属性。当我将鼠标悬停在文本上时，数据某些工具提示文本！显示为仅存在 alt =函数，但不像Bootstrap在他们的文档中提到的风格。

我已经采取措施解决此问题：

1. 包含来自外部的tooltip.js CDN
   
2. 激活工具提示投掷< Script> $（'[data-toggle =tooltip] '）.tooltip（{'placement'：'top'}）;< / script>


3. 添加 jQuery的Google API （我知道不是必须的）


4. 检查页面正在加载引导CDN和外部引用（All Do！）

标头HTML标记

 <！ - 最新编译和缩小的CSS  - > 
< link rel =stylesheethref =// maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css\"> 
<！ - 可选主题 - > 
< link rel =stylesheethref =// maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css\"> 
 <！ -  Bootstrap  - > 
< link href =css / bootstrap.min.css =stylesheet> 
<！ - 自定义CSS  - > 
< link href =css / style.css =stylesheet> 
<！ - 最新的编译和缩小的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标记

 < a href =＃data-toggle =tooltiptitle =某些工具提示文本！>将鼠标悬停在我身上< / a> 
  

这是它如何显示的图片。

解决方案

这是您的工作模板。我猜对什么是错的：

1. jQuery始终需要在bootstrap.js之前。


2. 如果您没有运行本地服务器，则需要将http：添加到CDN地址。


3. 您可能一直在尝试初始化头标记中的工具提示。问题在于文档可能还没有准备好。

以下工作正常。

HTML：
$ b

 < ！DOCTYPE html> 
< html lang =en> 
< head> 
< meta charset =utf-8> 
< meta http-equiv =X-UA-Compatiblecontent =IE = edge> 
< meta name =viewportcontent =width = device-width，initial-scale = 1> 
< title> Bootstrap 101模板< / title> 
 
 <！ -  Bootstrap  - > 
< link rel =stylesheethref =http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css> 
< link rel =stylesheethref =http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css> 
 
 <！ -  HTML5 Shim和Respond.js IE8支持HTML5元素和媒体查询 - > 
 <！ - 警告：如果您通过file查看页面，Respond.js不起作用：//  - > 
<！ -  [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 =tooltiptitle =一些工具提示文字！>将鼠标悬停在我身上< / a> 
 
 <！ -  jQuery（Bootstrap的JavaScript插件必需） - > 
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script> 
 <！ - 包含所有编译的插件（如下），或者根据需要包含单个文件 - > 
< 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> 
  

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:

1. Include tooltip.js from external CDN
2. activate tooltip throw <Script>$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});</script>
3. Add Google API of jQuery (I know is not neccessery)
4. 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.

解决方案

Here's a working template for you. My guesses as to what was wrong:

1. jQuery always needs to come before bootstrap.js.
2. If you don't have a local server running, you need to add the http: to the CDN addresses.
3. 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>

这篇关于Bootstrap工具提示不显示工具提示的样式，仅显示数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！