https://takao.blog/es/tags/popover/Recent content in Popover on Commentary of TakaoHugo -- gohugo.ioesCommentary of TakaoSun, 12 Jul 2026 04:12:51 +0900https://takao.blog/es/web/css-popover-api/Tue, 20 Aug 2024 00:00:00 +0900https://takao.blog/es/web/css-popover-api/<img src="https://takao.blog/img/thumbnail/css-popover-api-es.png" alt="Featured image of post CSS Popover API: Superposiciones nativas sin JavaScript" /><h2 id="introducción">Introducción </h2><p>Construir tooltips, menús y modales requería JavaScript. La CSS Popover API proporciona una forma declarativa nativa con manejo de posición, toggle, foco y cierre.</p> <h2 id="atributos-básicos">Atributos básicos </h2><p><code>popover</code> marca un elemento como superposición. <code>popovertarget</code> vincula un botón al popover. Modos: <code>auto</code> (cierre al hacer clic fuera o Escape) y <code>manual</code> (cierre programático).</p> <h2 id="api-toggle">API Toggle </h2><p>Métodos: <code>showPopover()</code>, <code>hidePopover()</code>, <code>togglePopover()</code>. Eventos: <code>beforetoggle</code> y <code>toggle</code> con <code>oldState</code> y <code>newState</code>.</p> <h2 id="light-dismiss">Light dismiss </h2><p>Los popovers auto se cierran al hacer clic fuera, presionar Escape o abrir otro popover.</p>