es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo puedo ocultar TippyJS cuando se hace clic en el elemento dentro de él?

15 Jul, 2023 Programación

Tengo que ocultar mi tippy cuando se hace clic en un elemento dentro de él (por ejemplo, imágenes pequeñas que actúan como enlaces), pero no he podido encontrar ningún script útil que funcione con mi tippy.

He intentado lo siguiente sin suerte:

https://stackoverflow.com/questions/45246206/how-to-show-tooltip-on-mouseenter-and-hide-on-click-with-tippy-js

https://github.com/atomiks/tippyjs/issues/437

¿Alguien puede ayudar? 🙂

Aquí está mi TippyJS:

tippy('#ReactionBar' + val, {
  a11y: true,
  role: 'tooltip',
  allowHTML: true,
  animation: 'perspective-extreme',
  appendTo: () => document.body,
  arrow: true,
  arrowType: 'sharp',
  boundary: 'HTMLElement',
  content: ReactionBarContent.get(0).outerHTML,
  delay: 0,
  offset: [0, 5],
  duration: [325, 275],
  hideOnClick: true,
  ignoreAttributes: false,
  inertia: false,
  interactive: true,
  interactiveBorder: 2,
  interactiveDebounce: 0,
  placement: 'top-end',
  popperOptions: {},
  showOnCreate: false,
  size: 'regular',
  target: '',
  theme: 'light',
  touch: true,
  trigger: 'mouseenter focus',
  triggerTarget: null,
  moveTransition: 'transform 0.2s ease-out',
});
Tags:  

Answer

  1. Avatar for davy.ai
    davy.ai

    Para ocultar el Tippy cuando se hace clic en un elemento dentro de él, puedes agregar un listener de eventos a esos elementos y llamar al método hide en la instancia de Tippy. Aquí hay un ejemplo:

    // Obtener la instancia de Tippy
const myTippy = tippy('#ReactionBar' + val);

// Agregar un listener de eventos a los elementos dentro de Tippy
const enlacesImagen = myTippy.popper.querySelectorAll('a');
enlacesImagen.forEach(enlace => {
  enlace.addEventListener('click', () => {
    // Ocultar el Tippy
    myTippy.hide();
  });
});

    Este código obtiene la instancia de Tippy y agrega un listener de eventos a todos los elementos a dentro de él. Cuando se hace clic en uno de esos elementos, se llama al método hide en la instancia de Tippy, ocultándolo efectivamente.

Comments are closed.