Yo, básicamente, quieren mostrar información sobre herramientas cuando alguien llega por primera vez a la página, pero después de que se ciernen sobre ella (o de otra información sobre herramientas en la página), vuelve a su valor predeterminado pase comportamiento. Parece ser un bug cuando esto sucede, ya que no funciona bien. Actualmente me carga la descripción utilizando el $(‘div#id’).descripción(‘ver’) el comando, pero me parece que no puede averiguar cómo volver de nuevo a su estado predeterminado pase comportamiento. Peor aún, si tengo que escribir una función de desplazamiento de la específica div para cambiar entre «mostrar» y «ocultar» es buggy.

Se puede ver el comportamiento de este sitio web: http://rework.herokuapp.com/organizations, en la sección ‘cómo funciona’.

Aquí está el código HTML:

<div class="row center works">

   <div class="of center"><img alt="Step 1" class="center step init" data-placement="bottom" id="step1" rel="tooltip" src="/assets/works/step1.png" data-original-title="People who are driven to find meaningful work apply to the ReWork Talent Pool."></div>

   <div class="of center"><img alt="Step 2" class="center step" data-placement="bottom" id="step2" rel="tooltip" src="/assets/works/step2.png" data-original-title="ReWork screens applicants for skills, experience, values, and accomplishments."></div>

   <div class="of center"><img alt="Step 3" class="center step" data-placement="bottom" id="step3" rel="tooltip" src="/assets/works/step3.png" data-original-title="You engage ReWork for a role you need filled, and ReWork hand-selects qualified candidates from the talent pool."></div>

   <div class="of center"><img alt="Step 4" class="center step" data-placement="bottom" id="step4" rel="tooltip" src="/assets/works/step4.png" data-original-title="You choose which candidates you want to meet, and make an offer if there’s a good fit."></div>

   <div class="of center"><img alt="Step 5" class="center step" data-placement="bottom" id="step5" rel="tooltip" src="/assets/works/step5.png" style="padding-bottom:13px" data-original-title="ReWork collects a fee when a successful hire is made."></div>

</div>

jQuery:

    $('img#step1').load(function(){
      $('#step1').tooltip('show');
    });

    $('.step').hover(function() {
        $('#step1').removeClass('init');
        if ($(this).attr('id') != 'step1') {
            $('#step1').tooltip('hide');
        } else {
            $('#step1').tooltip('show');
        }

El error es de nuevo visible en el sitio web: http://rework.herokuapp.com/organizations en la sección «cómo funciona».

InformationsquelleAutor krnjn | 2012-09-13

2 Comentarios

  1. 7

    Se podría hacer algo como esto:

    $('.works .step').tooltip().eq(0).tooltip('show').tooltip('disable').one('mouseout', function() {
      $(this).tooltip('enable');
    });​​​​​​​

    Demo: http://jsfiddle.net/AtvBN/9/ (es para una parte diferente de la página, pero el concepto es idéntico).

    • NO debería la descripción desaparecen cuando se coloca encima de otra descripción o hice entender mal la pregunta?
    • Thats a la derecha. Quiero la descripción para desaparecer incluso cuando se pasa por encima del otro. Esta solución sólo funciona si usted coloca el cursor sobre la inicial descripción en primer lugar.
    • Algo como esto? jsfiddle.net/AtvBN/11
    • sí @licuadora. Muchas gracias!
  2. 0

    «.en» clase se encarga de mostrar información sobre herramientas de título.
    si desea

    Mostrar toda la información sobre herramientas cuando el usuario primeros éxitos de la página.

    entonces usted puede simplemente añadir una clase a todos los de su descripción de los elementos.
    Como este:

    $('#step1').tooltip('show');//Initialize tooltip in any way you desire
    $('[data-toggle="tooltip"]').find(".tooltip.fade").addClass("in");

    en caso de que quieras

    Eliminar todos los predeterminada que muestra información sobre herramientas cuando el usuario primeros éxitos de la página y establezca la descripción de comportamiento predeterminado.

    También se puede hacer como esta

    $('#step1').tooltip('show');//Initialize tooltip in any way you desire
    $('[data-toggle="tooltip"]').find(".tooltip.fade").removeClass("in");

    De esta manera se está trabajando para mí, la esperanza de que también va a trabajar para usted.

    • Por favor, añada una explicación en lugar de sólo código…

Dejar respuesta

Please enter your comment!
Please enter your name here