折腾：
期间，想要把：
合并进当前的bootstrap4+jquery的html项目中。
已经看到人家说了，最好是bootstrap3，但是还是希望可以在我的bootstrap4中可以正常运行。
结果代码：
<!-- Bootstrap CSS --> <link rel="stylesheet" href=" https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css " integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> <!-- <link rel="stylesheet" href="css/highlightjs_default.css"> --> <link rel="stylesheet" href="css/highlight_atom-one-dark.css"> <!-- <link rel="stylesheet" href="css/highlight_monokai-sublime.css"> --> <link rel="stylesheet" href="css/bootstrap3_player.css"> <link rel="stylesheet" href="css/main.css"> </head> <div class="row col-md-8 col-md-offset-2 col-xs-12"> <audio controls data-info-att="Audio: Iain Houston and Felix Gibbons." <source src=" " type="audio/ogg" /> <source src=" " type="audio/mpeg" /> <a href=" ">BeBopAliens</a> An html5-capable browser is required to play this audio. </audio> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="js/jquery-3.3.1.js"></script> <!-- <script src=" https://code.jquery.com/jquery-3.3.1.slim.min.js " integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> --> <script src=" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js " integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> <script src="js/bootstrap.js"></script> <script src="js/highlight.js"></script> <script src="js/bootstrap3_player.js"></script> <script src="js/main.js"></script> </body> </html>
出错：
tooltip.js:699 Uncaught TypeError: No method named "fixTitle" at HTMLButtonElement.<anonymous> (tooltip.js:699) at Function.each (jquery-3.3.1.js:354) at jQuery.fn.init.each (jquery-3.3.1.js:189) at jQuery.fn.init._jQueryInterface [as tooltip] (tooltip.js:684) at HTMLAudioElement.time.showtime (bootstrap3_player.js:222) at HTMLAudioElement.dispatch (jquery-3.3.1.js:5183) at HTMLAudioElement.elemData.handle (jquery-3.3.1.js:4991) (anonymous) @ tooltip.js:699 each @ jquery-3.3.1.js:354 each @ jquery-3.3.1.js:189 _jQueryInterface @ tooltip.js:684 time.showtime @ bootstrap3_player.js:222 dispatch @ jquery-3.3.1.js:5183 elemData.handle @ jquery-3.3.1.js:4991
tooltip.js:699 Uncaught TypeError: No method named “fixTitle”
jquery tooltip.js Uncaught TypeError No method named fixTitle
jquery Uncaught TypeError No method named fixTitle
Uncaught TypeError No method named fixTitle
去包含jquery-ui.js看看
jquery-ui.js
另外看项目中，是有：fixTitle的
这个是：
/bootstrap3_player-master/js/bootstrap3_player.js
中的调用fixTitle的地方：
感觉是：
jquery tooltip fixTitle
难道必须用：
说的：
* Twitter Bootstrap 3 – http://twitter.github.com/bootstrap/
好像此处的：
$(time).tooltip(‘show’);
是可以正常执行的？
tooltip fixTitle
找不到fixTitle
好像需要加上这个plugin，然后就有了：
, fixTitle: function () {
var $e = this.$element
if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') {
$e.attr('data-original-title', $e.attr('title') || '').removeAttr('title')
}
} 了。
但好像不对。bootstrap的js中本身就有才对。
去调试看看
换成：
<!-- <link rel="stylesheet" href=" https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css " integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> --> <link rel="stylesheet" href="css/bootstrap.css"> <!-- <script src="js/bootstrap.js"></script> --> <script src="js/bootstrap.bundle.js"></script>
问题依旧。
才注意到这个是：tooltip.js
此处文件只有一个：
但是代码中的：
被Chrome中单独抽取出tooltip.js了
然后最后其中代码出错。
所以去搜：
jquery 4 tooltip
jquery 4 tooltip fixTitle
“Things to know when using the tooltip plugin:
* Tooltips rely on the 3rd party library Popper.js for positioning. You must include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js in order for tooltips to work!”
果然是：
要么是：在bootstrap.js之前就包含了：popper.min.js
要么是：直接用包含了Popper.js的bootstrap.bundle.min.js 或 bootstrap.bundle.js
然后还有：
* Tooltips are opt-in for performance reasons, so you must initialize them yourself.
先去改包含的问题：
<script src="js/jquery-3.3.1.js"></script> <!-- <script src=" https://code.jquery.com/jquery-3.3.1.slim.min.js " integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> --> <!-- <script src=" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js " integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> --> <!-- <script src="js/bootstrap.js"></script> --> <script src="js/bootstrap.bundle.js"></script>
结果：
错误依旧。
去参考：
One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:
去初始化试试
$('[data-toggle="tooltip"]').tooltip()加到自己的main.js中的
$(document).ready(function(){
中。
再去：
static/js/bootstrap3_player.js
加上：
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});问题依旧。
前面出错代码是：
if (typeof config === 'string') {
if (typeof data[config] === 'undefined') {
throw new TypeError(`No method named "${config}"`)
}
data[config]()bootstrap tooltip throw new TypeError(`No method named “${config}”`)
去看了看代码：
之前的show，都是_proto的属性值
但是没有：
_proto.fixTitle
但是注意到了有：
_proto._fixTitle
是不是去把：
fixTitle
都改为：
_fixTitle
就可以了？
去试试
终于没有错误了：
【总结】
此处，估计是bootstrap的js，在之前版本中，对于tooltip的属性中，是有fixTitle的
但是到了bootstrap 4后，改为了_fixTitle
导致报错，找不到。
去把此处的：
static/js/bootstrap3_player.js
中的fixTitle都改为：_fixTitle
//$(player_box).find('.glyphicon-refresh').parent().tooltip('fixTitle');
$(player_box).find('.glyphicon-refresh').parent().tooltip('_fixTitle');
//$(time).tooltip('fixTitle');
$(time).tooltip('_fixTitle’);
//$(time).tooltip('fixTitle');
$(time).tooltip('_fixTitle');
即可。
另外要注意，引用tooltip的话，要么是：
- 要么是：在bootstrap.js之前就包含了：popper.min.js
- 要么是：直接用包含了Popper.js的bootstrap.bundle.min.js 或 bootstrap.bundle.js
转载请注明：在路上 » 【已解决】将音频播放器bootstrap3_player整合到bootstrap4中出错：tooltip.js Uncaught TypeError No method named fixTitle