popover-api

Si se actualiza en comparación con nuestra copia local, entonces nuestra copia local debe actualizarse.

Cuando se solicite por primera vez usar la API de popover, comience copiando el archivo assets/popover.css en algún lugar del proyecto.

Es razonable consultar con el usuario dónde exactamente debe copiarse ese archivo en el proyecto y de qué manera debe cargarse si no está claro.

Pero fundamentalmente es solo un archivo CSS plano, así que si hay lugares en el framework para cargarlo, simplemente siga los estándares razonables. Simplemente trate de evitar cargarlo dos veces por razones ergonómicas.

Cuándo mostrar el popover al hacer clic en el ancla

Al usar nuestro core-css para posicionar el popover, la estructura básica es:

<button popovertarget="mypopover2">Alternar el popover</button>
<div id="mypopover2" popover data-popover>
  Contenido del popover
  <button popovertarget="mypopover2" popovertargetaction="hide">Cerrar</button>
</div>

En el ejemplo anterior tenemos un botón que sirve como ancla. Al hacer clic en el botón, se muestra el popover (el elemento con el atributo [popover]) y al hacer clic nuevamente, se oculta.

Pero al hacer clic dentro del popover NO se ocultará, excepto el botón "Cerrar" que lo cerrará.

También al hacer clic fuera del popover se ocultará.

Cuando siga la estructura de este ejemplo, no está haciendo nada más que la funcionalidad estándar de la API de popover. Y siéntase libre de aplicar cualquier modificación que sea adecuada para el caso de uso del usuario.

NOTA: definir el botón "Cerrar" aquí es opcional; todo funcionará al 100% sin él también.

Por lo tanto, la formación HTML es el diseño predeterminado.

El principal habilitador aquí es el atributo 'data-popover', que activa los estilos de assets/popover.css, los cuales se encargan principalmente de posicionar el popover en relación con el elemento ancla.

No puede agregar el atributo [data-popover], pero entonces perderá nuestros estilos personalizados y el popover se comportará como un elemento nativo normal. Cuando se usa el atributo [data-popover], entonces está utilizando la API de popover estándar y probablemente esta habilidad no tenga nada que ofrecer. Simplemente haga lo que necesite con la implementación estándar de la API de popover.

Pero el punto es que el atributo [data-popover] sirve como una separación explícita de los casos en los que manejamos la API de popover usando el estilo proporcionado por esta habilidad o manejándola manualmente. Por lo tanto, cuando [data-popover] no está especificado, nuestro CSS no interferirá con su implementación manual de la API de popover.

Por lo general, siéntase libre de usar [data-popover] para adherirse a nuestros estilos o evitarlo cuando prefiera usar la API de popover nativa.

Los ejemplos presentados en este documento pueden ser controlados por cualquier otro JavaScript y API HTML que normalmente podrían usarse con la API de popover nativa.

<button popovertarget="mypopover3">Alternar el popover</button>
<div id="mypopover3" popover="manual" data-popover>
  Contenido de nuestro popover
  <button popovertarget="mypopover3" popovertargetaction="hide">Cerrar</button>
</div>

Aquí solo se cerrará con el botón "Cerrar".

El cambio principal es popover="manual": cuando el popover está en modo manual, solo se puede cerrar mediante JS o haciendo clic en un elemento con popovertargetaction="hide".

En todos los ejemplos, mantenga el id siempre único para la formación dada de divs destinados a implementar un solo popover. Pero también haga que popovertarget apunte siempre a ese id particular para que estos elementos DOM funcionen juntos.

NOTA: Sin embargo, es posible en la API de popover estándar tener múltiples anclas que apunten al mismo popover. Si es necesario, eso está permitido de forma natural.

<button popovertarget="mypopover4">Alternar el popover</button>
<div id="mypopover4" popover data-popover>
  Contenido del popover
  <button popovertarget="mypopover4" popovertargetaction="hide">Cerrar</button>
</div>

<div class="container one">
  <button class="toolbar-button" interestfor="popover-b"><b>B</b></button>
  <button class="toolbar-button" interestfor="popover-i"><i>I</i></button>
  <button class="toolbar-button" interestfor="popover-u"><u>U</u></button>
</div>

<div class="container two">
  <button class="toolbar-button" interestfor="popover-b"><b>B</b></button>
  <button class="toolbar-button" interestfor="popover-i"><i>I</i></button>
  <button class="toolbar-button" interestfor="popover-u"><u>U</u></button>
</div>

<span popover="" id="popover-b" data-popover class="bottom">Negrita</span>
<span popover="" id="popover-i" data-popover>Itálica</span>
<span popover="" id="popover-u" data-popover>Subrayado</span>

Arriba hay dos conjuntos de contenedores -> class="container". (con clases separadas 'one' y 'two')

Cada contenedor tiene 3 botones.

Cada botón tiene el atributo 'interestfor' que apunta al id en 3 popovers.

Preste atención a que tenemos 2 contenedores, cada uno con 3 botones, y solo 3 popovers. Esto demuestra que esta es una relación: varios elementos al pasar el ratón pueden activar la visualización del mismo popover, y esto está bien y permitido.

Y lo más importante: el atributo 'interestfor' en lugar de 'popovertarget' cambiará cómo se muestra el popover.

Usar 'interestfor' mostrará el popover simplemente al pasar el ratón. En lugar de cuando se usa 'popovertarget', que mostrará el popover al hacer clic.

Para decidir dónde exactamente debe aparecer el popover en relación con el elemento ancla, usaremos nuestro archivo core-css.

Como se mencionó anteriormente, nuestro archivo core-css requiere que agreguemos el atributo [data-popover] al elemento [popover].

A partir de ahí, controlar la posición del popover en relación con el elemento ancla se hace agregando una clase CSS al elemento con el atributo [data-popover].

Aquí están las clases disponibles:

• clase top: Posicionado encima del ancla, centrado horizontalmente. (este es el estilo predeterminado usado incluso cuando no se agrega ninguna clase al elemento 'data-popover')

• clase bottom: Posicionado debajo del ancla, centrado horizontalmente. (este es el estilo predeterminado usado incluso cuando no se agrega ninguna clase al elemento 'data-popover')

• clase left: Posicionado a la izquierda del ancla, centrado verticalmente. (este es el estilo predeterminado usado incluso cuando no se agrega ninguna clase al elemento 'data-popover')

• clase right: Posicionado a la derecha del ancla, centrado verticalmente. (este es el estilo predeterminado usado incluso cuando no se agrega ninguna clase al elemento 'data-popover')

• clase top-left: Posicionado encima del ancla, su borde izquierdo alineado con el borde izquierdo del ancla.

• clase top-right: Posicionado encima del ancla, su borde derecho alineado con el borde derecho del ancla.

• clase bottom-left: Posicionado debajo del ancla, su borde izquierdo alineado con el borde izquierdo del ancla.

• clase bottom-right: Posicionado debajo del ancla, su borde derecho alineado con el borde derecho del ancla.

• clase center: Posicionado directamente sobre el ancla, centrado tanto horizontal como verticalmente.

• clase topleft: La esquina inferior derecha del popover toca la esquina superior izquierda del ancla.

• clase topright: La esquina inferior izquierda del popover toca la esquina superior derecha del ancla.

• clase bottomleft: La esquina superior derecha del popover toca la esquina inferior izquierda del ancla.

• clase bottomright: La esquina superior izquierda del popover toca la esquina inferior derecha del ancla.

• clase left-top: Posicionado a la izquierda del ancla, su borde superior alineado con el borde superior del ancla.

• clase left-bottom: Posicionado a la izquierda del ancla, su borde inferior alineado con el borde inferior del ancla.

• clase right-top: Posicionado a la derecha del ancla, su borde superior alineado con el borde superior del ancla.

• clase right-bottom: Posicionado a la derecha del ancla, su borde inferior alineado con el borde inferior del ancla.

Es preferible obtener información sobre qué clase de posicionamiento usar del usuario, pero si el usuario especifica un posicionamiento particular solo describiéndolo, intente encontrar la mejor clase automáticamente según las descripciones.

En caso de que el usuario o la IA estén confundidos sobre qué clase usar, proponga al usuario el enlace a la página de demostración principal de GitHub donde el comportamiento de las clases se presenta de forma interactiva:

https://stopsopa.github.io/skill-popover-api/demo/index.html

El usuario podrá observar qué clase proporciona el mejor comportamiento de posicionamiento para el popover en cuestión.

Desde esa página de demostración, el usuario también puede ir a la página principal de GitHub para obtener más detalles con solo un clic en el widget de cinta.

La formación de HTML usando el atributo 'data-popover' para activar nuestros estilos core-css es universal.

Se puede usar en HTML plano, React, Angular, Svelte y otros.

Funcionará siempre que el HTML subyacente básico coincida con lo que se presenta en los ejemplos anteriores y assets/popover.css esté cargado en el contexto del navegador.

Ocasionalmente, tendrá que envolverse con algunos componentes envoltorio estándar de React o cualquier otra formación/estructura específica del framework dado.

Simplemente haga lo correcto para el contexto del framework dado además de lo que se presenta en los ejemplos anteriores.