HTML popover-ominaisuudet

Määrittely ja käyttö

popover Ominaisuus määrittää elementin pop-up-elementiksi, mikä tarkoittaa, että kun elementti kutsutaan, se sijoitetaan sisällön yläpuolelle eikä häiritse muiden HTML-elementtien sijaintia.

Pop-up-elementti on näkymätön ennen kuin toinen elementti kutsuu sitä. Toinen elementti täytyy olla popovertarget-ominaisuudella, jonka arvo viittaa pop-up-elementin id:hen.

Pop-up-elementti sijoitetaan kaikkien muiden sisällön yläpuolelle, ja popovertarget-elementtiä klikkaamalla pop-up-elementti voi vaihtaa näkyvyyttään:

Hei

Pop-up-elementti voi olla yksittäinen HTML-elementti, kuten yllä olevassa esimerkissä, tai koko HTML-elementtikokonaisuus, kuten alla olevassa esimerkissä.

Katso myös:

HTML viittomakirja:HTML Input popovertarget-ominaisuus

HTML viittomakirja:HTML Input popovertargetaction-ominaisuus

Esimerkki

Esimerkki 1

Lisää <h1> -elementti, jolla on popover-ominaisuus, sekä näyttö/piilottamiseen käytettävä painike:

<h1 popover id="myheader">Hei</h1>
<button popovertarget="myheader">Paina minua!</button>

Kokeile itse

Esimerkki 2

Käytä div-elementtiä ponnahdusikkunaelementtinä:

<div popover id="mydiv">
  <h2>Popover</h2>
  <hr>
  <p>Ponnahdusikkuna on elementti, joka sijoittuu kaikkien muiden elementtien yläpuolelle.</p>
  <p>Kun haluat kertoa jotain tärkeää, voit käyttää sitä.</p>
</div>

Kokeile itse

Syntaksi

<elementti popover>

Arvo

popover Ominaisuus on boolean-ominaisuus. Jos se on asetettu, se määrittää, että elementti on ponnahdusikkunaelementti.

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
114 114 Ei tuettu 17 100