0

Como fazer a Switchery mostrar bootstrap tooltip em si mesmo?

Este exemplo não funciona:

<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');
 });

Como fazer???

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

2
  • Bem vindo ao stackoverflow, existe uma outra versão para se postar perguntas em inglês stackoverflow.com
    – Marco
    Commented 21/06/2017 às 15:57
  • Uma coisa que não ficou muito clara é se você quer que o tooltip apareça no evento click ou se com o padrão hover.
    – Marco
    Commented 21/06/2017 às 16:35

1 Resposta 1

1

O que acontece é que o Switchery cria um elemento span estilizado para dar essa cara de controle do iOS e oculta o elemento original. Justamente por isso que o tooltip não aparece, pois o elemento que possui o atributo data-toggle="tooltip" é o input que está oculto.

Você pode transferir os atributos que você precisa para o novo elemento dessa maneira:

$(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" />

3
  • Opa!! Muito obrigado pela colaboração amigo!!! Vou testar e posto o resultado. De toda forma, MUITO AGRADECIDO!
    – José Dam
    Commented 22/06/2017 às 5:27
  • Creio que você tenha marcado como correto porque solucionou o seu problema, certo? Espero que a resposta tenha sido clara e você tenha adquirido mais conhecimento. Abs
    – Marco
    Commented 22/06/2017 às 17:37
  • Olá!! Muito obrigado plea colaboração amiga. Serviu perfeitamente muito agradecido.
    – José Dam
    Commented 22/06/2017 às 21:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .