Place a balloon on top of input[type=range]

Question

I am generating a form from a php, it generates an html equal to this:

<div class="mf_slider">
  <div class="mf_slider_label">Você tem cabelos brancos?</div>
  <div class="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner"></div>
  </div>
  <input type="range" min="0" max="3" value=0 step="0.1">
  <div class="mf_slider_content">
    <input class="mf_option" type="hidden" name="mf[gray_hair#slider][]" id="id_0" value="Não">
    <input class="mf_option" type="hidden" name="mf[gray_hair#slider][]" id="id_1" value="Um Pouco">
    <input class="mf_option" type="hidden" name="mf[gray_hair#slider][]" id="id_2" value="Médio">
    <input class="mf_option" type="hidden" name="mf[gray_hair#slider][]" id="id_3" value="Muito">
  </div>
</div>

What I want to do is that on top of the squeak button, the value according to the id of input within div.class="mf_slider_content".

To help I’m putting this codeopen. If anyone knows how to do that.

UPDATE

Good I managed to do, but the balloon does not point right to the button of the range he gives a varied. If anyone can arrange it for me I’d appreciate it immensely.