0

estoy tratando de añadir un tooltip de Bootstrap con algunas propiedades peri éste no se muestra cuando lo pongo de la siguiente manera.

$(document).ready(function () {
$("._diifem_").prop("disabled", true);
$('#wall').on('keyup', function () {
    var textarea_value = $("#wall").val();
    if (textarea_value.length > 5) {
        $('._diifem_').prop({
            disabled: false,
        });
    } else {
        $('._diifem_').prop({
            disabled: true
        }).tooltip({
            title: 'Hola',
            trigger: "click"
        });
    }
   });
});

Lo que hace es que, cuando un campo de texto (textarea) está vació, deshabilita un botón, para ello quiero añadirle un tooltip que muestre la advertencia.

¿Cómo podría hacerlo? Muchas gracias :)

2
  • trigger: click es para que el tooltip se muestre cuando le haces click al elemento. usa el default (borra el trigger) y fijate si funciona. Si podes todo en un fiddle va a ser mas facil ayudarte. Commented el 6 may. 2017 a las 18:56
  • Gracias por responder. jsfiddle.net/a9vdawa3/1 Aquí el fiddle para que eches un vistazo. Por cierto, ya intenté con todos los trigger pero ninguno me funciona :(
    – Alex Parra
    Commented el 7 may. 2017 a las 8:42

1 respuesta 1

0

Aparentemente tooltip no es muy propenso a ser manejado dinamicamente, una vez que el title obtiene en el tooltip, se crea una propiedad que es "original-title", cambiando esa propiedad se soluciona lo que necesitas:

$(document).ready(function () {
    $('._diifem_').prop({
      disabled: true
    }).tooltip({
      title : "Debes ingresar por lo menos un caracter"
    });
    $('#wall').on('keyup', function () {
        var textarea_value = $("#wall").val();
        if (textarea_value.length >= 1) {
            $('._diifem_').prop({
                disabled: false,
            }).attr('data-original-title','Enviar Mensaje');
        } else {
            $('._diifem_').prop({
                disabled: true
            }).attr('data-original-title','Debes ingresar por lo menos un caracter');
        }
    })
});

Tambien puedes usar directamente attr:

 if (textarea_value.length >= 1) {
        $('._diifem_').attr({
            disabled: false,
            'data-original-title': 'Enviar Mensaje',
        });
    } else {
        $('._diifem_').attr({
            disabled: true,
            'data-original-title': 'Debes ingresar por lo menos un caracter'
        });
    }

BTW fijate donde vas a mostrar el tooltip, en el fiddle lo puse debajo (con data-placement) para poder verlo:

<input type="button" class="btn btn-primary _diifem_"  data-placement="bottom" Value="Enviar mensaje">
1
  • Muchas gracias, funcionó :)
    – Alex Parra
    Commented el 7 may. 2017 a las 17:56

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.