Switchery with tooltips (bootstrap), how to do?

Question

Switchery with tooltips (bootstrap), how to do?

Navigation

#1 by (1 votes)

0

How to make Switchery show bootstrap tooltip in 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 it ???

How to 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 ???

jquery bootstrap

asked by anonymous 20.06.2017 / 22:55

1 answer

array conversion error for string Concatenate data from a table

score 1 · Accepted Answer

What happens is that Switchery creates a span stylized element to give this iOS control face and hides the original element. This is exactly why the tooltip does not appear, since the element that has the data-toggle="tooltip" attribute 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><scriptsrc="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><inputswitchtype="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" />