Switchery with tooltips (bootstrap), how to do?

Question

How to make Switchery show bootstrap tooltip on itself?

This example does not work:

<input  data-toggle="tooltip" title="Hooray!" type="checkbox" class="js-switch" />

var clickButton = document.querySelector('.js-switch');

 clickButton.addEventListener('click', function() {
     $('[data-toggle="tooltip"]').tooltip('show');
 });

How to do???

How to do Switchery show bootstrap tooltip in him self? This example doesn’t work:

<input  data-toggle="tooltip" title="Hooray!" type="checkbox" class="js-switch" />

var clickButton = document.querySelector('.js-switch');

 clickButton.addEventListener('click', function() {
     $('[data-toggle="tooltip"]').tooltip('show');
 });

How to do???

Answer 1

What happens is that the Switchery creates an element span stylized to give this iOS control face and hides the original element. Precisely why the tooltip does not appear, because the element that has the attribute data-toggle="tooltip" is the input that is hidden.

You can transfer the attributes you need to the new element this way:

$(document).ready(function() {
  var clickButton = $('.js-switch');
  var init = new Switchery(clickButton[0]);

  // Adiciona no elemento criado pelo Switchery, todos os atributos que fazem o tooltip funcionar
  $(init.switcher).attr({
    title: clickButton.attr('title'),
    'data-toggle': clickButton.attr('data-toggle')
  });

  // Cria o tooltip do boostrap em todos os elementos com o atributo data-toggle="tooltip"
  $('[data-toggle="tooltip"]').tooltip({
    placement: 'right'
  });

  clickButton.on('click', function() {
    $('[data-toggle="tooltip"]').tooltip('show');
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.js"></script>
<input switch type="checkbox" class="js-switch" title="teste" checked data-toggle="tooltip" title="Tooltip on top" />
<br />
<input type="text" id="tx" data-toggle="tooltip" title="Tooltip on top" />