1

Estoy tratando de cambiar la posición de un Tooltip de Bootstrap al hacer scroll mediante Jquery. El atributo data-placement se cambia pero el efecto no funciona.

$('[data-toggle="tooltip"]').tooltip();

jQuery(window).scroll(function() {
  var threshold = 20;
  if (jQuery(window).scrollTop() >= 1)
    $('#faX').attr('data-placement', 'top');
  else
    $('#faX').attr('data-placement', 'bottom');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<p style="margin:200px"></p>
<p><a class="iconsLogo" href="#"><i id="faX" class="fa fa fa-facebook fa2" data-placement="bottom" data-toggle="tooltip" title="Seguinos en Facebook!" aria-hidden="true"></i></a></p>
<p style="margin:200px"></p>

1
  • Correción: El id de i seria "faX"
    – Elias Aria
    Commented el 28 sept. 2016 a las 22:26

1 respuesta 1

2

Se hace mediante las opciones del objeto tooltip:

$('#faX').data('bs.tooltip').option

$('[data-toggle="tooltip"]').tooltip();

jQuery(window).scroll(function() {
  var threshold = 20;
  if (jQuery(window).scrollTop() >= 1)
   $('#faX').data('bs.tooltip').options.placement = 'bottom';
  else
    $('#faX').data('bs.tooltip').options.placement = 'top';
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<p style="margin:200px"></p>
<p><a class="iconsLogo" href="#"><i id="faX" class="fa fa fa-facebook fa2" data-placement="bottom" data-toggle="tooltip" title="Seguinos en Facebook!" aria-hidden="true"></i></a></p>
<p style="margin:200px"></p>

1
  • Excelente! Muchas gracias!
    – Elias Aria
    Commented el 29 sept. 2016 a las 2:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.