使用javascript时，引导工具提示不可见

我是新手。我正在我的程序中使用引导范围滑块和javascript。尽管使用了以下内容，但我无法看到滑块的工具提示：

<input id = "cheapHFSlider" type="range" data-slider-min="0" data-slider-max="100" data-slider-step="1" 
                data-slider-tooltip="show" onchange="sliderChanged(this)">
<label id = "cheapHFSliderVal">

在Chrome的调试模式下，当我将光标悬停在该滑块上时，我可以看到“tooltip tooltip main top”正在调试器的“元素”选项卡中高亮显示。正在附加上面的屏幕截图

相关CSS和JS包括：

<!-- Bootstrap CSS-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<!-- Bootstrap slider CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/css/bootstrap-slider.css">

    <!-- Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<!-- Bootstrap slider JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/bootstrap-slider.js"></script>

我的脚本标签是：

<script type="text/javascript">

        $(document).ready(function() {
            $("#cheapHFSlider").slider().on('slide', function(_event) {
                $("#cheapHFSliderVal").html(_event.value + "%");
            });
            $("#cheapHFSliderVal").html($("#cheapHFSlider").slider('getValue') + "%"); // set the initial value of slider in label
        })

        function sliderChanged(slider) {
            switch(slider.id) {
                case 'cheapHFSlider':
                    $("#cheapHFSliderVal").html(slider.value + "%");
                    break;

                default:
                    console.log("Invalid slider '" + slider.id + "' !");
            }
        }

</script>

$（文档）.ready（函数（）{
$（“#cheapHFSlider”）.slider（）.on（'slide'，函数（_事件）{
$（“#cheapHFSliderVal”）.html（_event.value+“%”）；
});
$（“#cheapHFSliderVal”）.html（$（“#cheapHFSlider”）.slider（'getValue'）+“%”；//设置标签中滑块的初始值
})
功能滑块已更改（滑块）{
开关（slider.id）{
“廉价滑块”案例：
$（“#cheapHFSliderVal”）.html（slider.value+“%”）；
打破
违约：
log（“无效滑块“+”slider.id+“！”）；
}
}

---

请告诉我哪里出了问题

请单击

并创建一个-即使我添加了jQuery UI和引导程序，你的代码也不会运行：添加了CSS和JS的缺失标记。请单击

并创建一个-即使我添加了jQuery UI和引导程序，你的代码也不会运行：添加了CSS和JS的缺失标记。