Bootstrap JS Popover


JS Popover (popover.js)

Il plug-in Popover è simile ai suggerimenti; è una finestra pop-up che appare quando l'utente fa clic su un elemento. La differenza è che il popover può contenere molti più contenuti.

Dipendenza dal plug-in: i popover richiedono che il plug-in tooltip (tooltip.js) sia incluso nella tua versione di Bootstrap.

Per un tutorial sui Popover, leggi il nostro Bootstrap Popover Tutorial .


Via dati-* Attributi

data-toggle="popover"Attiva il popover .

L' titleattributo specifica il testo dell'intestazione del popover.

L' data-contentattributo specifica il testo che dovrebbe essere visualizzato all'interno del corpo del popover.

Esempio

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

Tramite JavaScript

I popover non sono plugin solo CSS, e quindi devono essere inizializzati con jQuery: seleziona l'elemento specificato e chiama il popover()metodo.

Esempio

// Select all elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();

// Select a specified element
$('#myPopover').popover();


Opzioni popover

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungi il nome dell'opzione a data-, come in data-placement="".

Name Type Default Description Try it
animation boolean true

Specifies whether to add a CSS fade transition effect when opening and closing the popover

  • true - Add a fading effect
  • false - Do not add a fading effect
container string, or the boolean false false Appends the popover to a specific element.
Example: container: 'body'
content string "" Specifies the text inside the popover's body
delay number, or object 0 Specifies the number of milliseconds it will take to open and close the popover.

To specify a delay for opening and another one for closing, use the object structure:

delay: {show: 500, hide: 100} - which will take 500 ms to open the popover, but only 100 ms to close it
html boolean  false Specifies whether to accept HTML tags in the popover:
 
  • true - Accept HTML tags
  • false - Do not accept HTML tags
Note: The HTML must be inserted in the title attribute (or using the title option).

When set to false (default), jQuery's text() method will be used. Use this if you are worried about XSS attacks
placement string "right" Specifies the popover position. Possible values:

  • "top" - Popover on top
  • "bottom" - Popover on bottom
  • "left" - Popover on left
  • "right" - Popover on right
  • "auto" - Lets the browser decide the position of the popover. For example, if the value is "auto left", the popover will display on the left side when possible, otherwise on the right. If the value is "auto bottom", the popover will display at the bottom when possible, otherwise on the top
selector string, or the boolean false false Adds the popover to a specified selector
template string   Base HTML to use when creating the popover.

The popover's title will be injected into the .popover-title.

The popover's content will be injected into the .popover-content.

.arrow will become the popover's arrow.

The outermost wrapper element should have the .popover class.
title string "" Specifies the header text of the popover
trigger string "click" Specifies how the popover is triggered. Possible values:

  • "click" - Trigger the popover with a click
  • "hover" - Trigger the popover on hover
  • "focus" - Trigger the popover when it gets focus (by tabbing or clicking .e.g)
  • "manual" - Trigger the popover manually
Tip: To pass multiple values, separate them with a space
viewport string, or object {selector: "body", padding: 0} Keeps the popover within the bounds of this element.

Example: viewport: '#viewport' or {selector: '#viewport', padding: 0}

Metodi popover

La tabella seguente elenca tutti i metodi popover disponibili.

Method Description Try it
.popover(options) Activates the popover with an option. See options above for valid values
.popover("show") Shows the popover
.popover("hide") Hides the popover
.popover("toggle") Toggles the popover
.popover("destroy") Hides and destroys the popover

Eventi popover

La tabella seguente elenca tutti gli eventi popover disponibili.

Event Description Try it
show.bs.popover Occurs when the popover is about to be shown
shown.bs.popover Occurs when the popover is fully shown (after CSS transitions have completed)
hide.bs.popover Occurs when the popover is about to be hidden
hidden.bs.popover Occurs when the popover is fully hidden (after CSS transitions have completed)

Altri esempi

Design popover personalizzato

Usa i CSS per personalizzare l'aspetto del popover:

Esempio

 /* Popover */
.popover {
  border: 2px dotted red;
}

/* Popover Header */
.popover-title {
  background-color: #73AD21;
  color: #FFFFFF;
  font-size: 28px;
  text-align:center;
}

/* Popover Body */
.popover-content {
  background-color: coral;
  color: #FFFFFF;
  padding: 25px;
}

/* Popover Arrow */
.arrow {
  border-right-color: red !important;
}