Ejemplo 1: ventana emergente de arranque
<!-- Bootstrap 5 Popovers -->
<button
type="button"
class="btn btn-lg btn-danger"
data-bs-toggle="popover"
title="Popover title"
data-bs-content="And here's some amazing content. It's very engaging. Right?"
>
Click to toggle popover
</button>
<!-- Four directions -->
<button
type="button"
class="btn btn-secondary"
data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="top"
data-bs-content="Top popover"
>
Popover on top
</button>
<button
type="button"
class="btn btn-secondary"
data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="right"
data-bs-content="Right popover"
>
Popover on right
</button>
<button
type="button"
class="btn btn-secondary"
data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="bottom"
data-bs-content="Bottom popover"
>
Popover on bottom
</button>
<button
type="button"
class="btn btn-secondary"
data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="left"
data-bs-content="Left popover"
>
Popover on left
</button>
Ejemplo 2: bootstrap 4 popover content from div
.popover-html ul {
list-style: none;
margin: 0;
padding: 0;
}
.popover-html ul li {
display: inline-block;
white-space: nowrap;
width: 33%;
}
.popover-html ul li + li {
padding-left: 5px;
}
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)