Popover

Un popover es una vista transitoria que se muestra en una pantalla de contenido cuando un usuario hace clic en un botón de control o dentro de un área definida. Este aparece con una flecha que apunta al botón, icono o elemento clickeable , para que el usuario mantenga la visibilidad en el contenido constantemente.

Playground

Crea tu popover

Detalle

Indica el nombre del segundo nivel organizacional. Por defecto es Área en caso de no tener valor.

Ejemplo de uso

Segundo Nivel Organizacional

info_outline

Ubicación popover

arribaderechaabajoizquierda

Cambiar título

Cambiar contenido

Ruby

<%= link_to md_icon('info_outline', clase: 'switch__icon'),
      '#void)',
      data: {
        toggle: 'popover',
        html: true,
        placement: :top,
        content: 'Indica el nombre del segundo nivel organizacional. Por defecto es Área en caso de no tener valor.',
        append_to: "body",
        title: 'Detalle'
      } %>
          

Html

<!-- Popover en Span -->
<span
data-toggle="popover"
data-html="true"
data-placement="top"
data-content="Indica el nombre del segundo nivel organizacional. Por defecto es Área en caso de no tener valor."
data-append-to="body"
data-title="Detalle"
aria-expanded="false"
><span class="material-icons notranslate switch__icon" aria-hidden="true"
>info_outline
</span>
</span>
          

Lista de parámetros

Parámetro

Tipo

Detalle

title	String	Título perteneciente al popover, se agrega dentro de data para evitar doble título con los tooltip del navegador
content	String	Contenido perteneciente al popover
html	Boolean	Determina si conenido permite etiquetas HTML
placement	String || Symbol	Determina la ubicacion de popover

Anatomía

1. Contenedor

Contenedor principal del contenido.

2. Header

El header contiene siempre un título.

3. Body [opcional]

Texto para acompañar el títlo, contenido flexible. Los usos aceptados se muestran en la página anterior.

4. Flecha

La flecha puede utilizarse en: Top, Right, Left, Bottom.