使用javascript无法看到Bootstrap工具提示

Question

我是Bootstrap的新手。我在我的程序中使用bootstrap范围滑块和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的调试模式下将光标悬停在该滑块上时，我可以看到调试器的Elements选项卡中突出显示'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>

请告诉我出错的地方