html - Bootstrap tooltip is not visible using javascript -

i new bootstrap. using bootstrap range slider , javascript in program. inspite of using following, not able see tooltip of slider:

<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"> 

when hover cursor on slider in chrome's debugging mode, can see 'tooltip tooltip-main top' being highlighted in elements tab of debugger. attaching screen shot of above.

related css , js are:

<!-- 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> 

my script tag is:

<script type="text/javascript">          $(document).ready(function() {             $("#cheaphfslider").slider().on('slide', function(_event) {                 $("#cheaphfsliderval").html(_event.value + "%");             });             $("#cheaphfsliderval").html($("#cheaphfslider").slider('getvalue') + "%"); // set 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> 

please let me know going wrong