2

Css que se utiliza para el tooltip:

.

.popper,
.tooltip {
  position: absolute;
  z-index: 9999;
  background: #009B67;
  color: white;
  width: 330px;
  border-radius: 3px;
  box-shadow: 0 0 2px rgba(0,0,0,0.5);
  padding: 10px;
  text-align: center;
}
.tooltip-inner {
     overflow-x: auto;
}
 .tooltip-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
     margin: 5px; 
}

.tooltip-arrow {
    border-width: 5px 5px 0 5px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    bottom: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
    background: white;
    color:#009B67;
}

introducir la descripción de la imagen aquí

Ademas deberia decir que uso el tooltip.js de bootstrap, y lo que deseaba era interactuar entre el evento y el tooltip, pero nunca logro ingresar en el porque comienza a parpadear, realmente necesito ayuda Gracias

4
  • Tienes el valor en un label al momento de mostrar ? Commented el 14 jun. 2019 a las 22:46
  • Algo asi ? <label tooltip="El total ingresos es el resultado de la suma de todos los ingresos." placement="top" show-delay="500"> <strong>Total ingresos y/o ventas brutas: ${{acomuladorIngresos | currency:'':'' : '1.0'}} </strong> </label> Commented el 14 jun. 2019 a las 22:48
  • Si los tengo dentro de una etiqueta con la clase tooltip, el problema es cuando intento ingresar en el tooltip como que se desvanece o desaparece, lo que me gustaria es posible interactuar entre ellos ? La verdad es la primera vez que uso esta libreria y creo que no la estoy usando correctamente Commented el 14 jun. 2019 a las 23:11
  • Y si utilizas el ejemplo que te puse en el comentario? , puede que te sirva no es una clase es un atributo tooltip , yo lo he utilizado y no he tenido problema Commented el 15 jun. 2019 a las 14:45

1 respuesta 1

1

Si utilizas el tooltip.js de boostrap entonces usas :

    eventRender: function(event, element) {


                jQuery(element).tooltip(
                    {
                        title: event.title
                                ,html: true,placement:"top",trigger:"click"});


                    },
         } 
  • Si es asi aca veras las opciones por defectos con las que se origina: https://getbootstrap.com/docs/4.0/components/tooltips/
  • Te daras cuenta que la propiedad por defecto es hover focus de alli, es donde al pasar el mouse y estar en foco es que aparece el tooltip, pero cuando intentas ingresar al tooltip perderas el foco, por lo tanto desaparecería, de ahí es el parpadeo. Coloca el trigger en click y asi podrias interactuar, el único inconveniente seria para que se vuelva ha cerrar tendrías que volver hacer click.
1
  • 1
    Funciono ahora si puedo ingresar al tooltip, aunque me hubiera gustado conservar el efecto del hover y el focus y poder ingresar en el, gracias saludos Commented el 15 jun. 2019 a las 20:04

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.