Bootstrap工具提示不显示工具提示的样式,仅显示数据
Far*_*had 18 html javascript jquery twitter-bootstrap
试图使Bootstrap显示工具提示功能,我完全按照关于工具提示的Bootstrap DOC并声明我的属性和属性.当我将鼠标悬停在文本上时,数据显示只有函数,但不是像文档中提到的Bootstrap样式.Some tooltip text!alt=""
我采取的步骤来解决此问题:
- 包括来自外部CDN的 tooltip.js
- 激活工具提示
<Script>$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});</script> - 添加jQuery的Google API(我知道不是必须的)
- 检查页面是否正在加载Bootstrap CDN和外部CDN(All Do!)
标头HTML标记
<!-- 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标记
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
这是一个如何显示的图像.
1_b*_*bug 29
还要记住,Bootstrap Tooltip不喜欢jQuery UI(有一些名称冲突,'tooltip'就是其中之一).
解决方案是更改脚本加载顺序:首先是jQuery UI,之后是bootstrap.js.
- 这是我的问题。我没有使用jQuery UI，但是使用了我们使用的库（jQuery fileupload）。 (2认同)
- 如果不相关，您还可以生成没有工具提示的自定义 jquery UI (2认同)
- 上帝保佑你，我有很多挣扎 (2认同)
jme*_*e11 16
这是适合您的工作模板.我猜错了什么:
- jQuery总是需要在bootstrap.js之前来.
- 如果您没有运行本地服务器,则需要将http:添加到CDN地址.
- 您可能一直在尝试初始化head标签中的工具提示.问题是该文件可能尚未准备好.
以下工作正常.
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>
- 因为它正在寻找具有data-toggle ="tooltip"属性的元素,并且尚未加载该元素.可以将页面视为从上到下加载.无论如何,最好在结束身体标记之前将你的js放在页面底部.对于用户来说,这会给人一种加载时间更快的印象,因为页面内容加载时无需等待加载javascript. (2认同)
您的问题很可能是您未能正确初始化工具提示.看看这个bootply
该文件的状态:
HTML:
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
Jquery:
$("[data-toggle=tooltip").tooltip();
- 请记住,您只需要
bootstrap.min.css和bootstrap.js工具提示正常工作. - 请记住使用绝对URL加载脚本和样式表(
/在路径前添加). - bootstrap依赖于jquery,首先加载jquery.