本文介绍了Bootstrap工具提示不显示工具提示的样式，仅显示数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
试图让Bootstrap显示工具提示功能，我完全按照 Bootstrap DOC 关于工具提示并声明我的属性和属性。当我将鼠标悬停在文本上时，数据某些工具提示文本！显示为仅存在 alt =函数，但不像Bootstrap在他们的文档中提到的风格。 包含来自外部的tooltip.js CDN 激活工具提示投掷< Script> $（'[data-toggle =tooltip] '）.tooltip（{'placement'：'top'}）;< / script> 添加 jQuery的Google API （我知道不是必须的） 检查页面正在加载引导CDN和外部引用（All Do！） jQuery始终需要在bootstrap.js之前。 如果您没有运行本地服务器，则需要将http：添加到CDN地址。 您可能一直在尝试初始化头标记中的工具提示。问题在于文档可能还没有准备好。 Include tooltip.js from external CDN
activate tooltip throw <Script>$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});</script>
Add Google API of jQuery (I know is not neccessery)
check if the page is loading the Bootstrap CDN and external ones (All Do!)
jQuery always needs to come before bootstrap.js.
If you don't have a local server running, you need to add the http: to the CDN addresses.
You may have been trying to initialize the tooltip in the head tags. Problem is that the document probably wasn't ready.
我已经采取措施解决此问题：
标头HTML标记
<！ - 最新编译和缩小的CSS - > < link rel =stylesheethref =// maxcdn.bootstrapcdn/bootstrap/3.2.0/css/bootstrap.min.css\"> <！ - 可选主题 - > < link rel =stylesheethref =// maxcdn.bootstrapcdn/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/bootstrap/3.2.0/js/bootstrap.min.js\"> ;</script> < script src =// ajax.googleapis/ajax/libs/jquery/1.11.1/jquery.min.js\"> ;</script>HTML标记
< a href =＃data-toggle =tooltiptitle =某些工具提示文本！>将鼠标悬停在我身上< / a>这是它如何显示的图片。
解决方案
这是您的工作模板。我猜对什么是错的：
以下工作正常。
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 =maxcdn.bootstrapcdn/bootstrap/3.2.0/css/bootstrap.min.css> < link rel =stylesheethref =maxcdn.bootstrapcdn/bootstrap/3.2.0/css/bootstrap-theme.min.css> <！ - HTML5 Shim和Respond.js IE8支持HTML5元素和媒体查询 - > <！ - 警告：如果您通过file查看页面，Respond.js不起作用：// - > <！ - [if lt IE 9]> < script src =oss.maxcdn/html5shiv/3.7.2/html5shiv.min.js>< / script> < script src =oss.maxcdn/respond/1.4.2/respond.min.js>< / script> <！[endif] - > < / head> < body> < a href =＃data-toggle =tooltiptitle =一些工具提示文字！>将鼠标悬停在我身上< / a> <！ - jQuery（Bootstrap的JavaScript插件必需） - > < script src =ajax.googleapis/ajax/libs/jquery/1.11.1/jquery.min.js>< / script> <！ - 包含所有编译的插件（如下），或者根据需要包含单个文件 - > < script src =// maxcdn.bootstrapcdn/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:
Header HTML Markup
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn/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/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//ajax.googleapis/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:
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="maxcdn.bootstrapcdn/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="maxcdn.bootstrapcdn/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="oss.maxcdn/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="oss.maxcdn/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="ajax.googleapis/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/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script> $( document ).ready(function() { $('[data-toggle="tooltip"]').tooltip({'placement': 'top'}); }); </script> </body> </html>
更多推荐
Bootstrap工具提示不显示工具提示的样式,仅显示数据
发布评论