Popover
Popover em botões necessitam de uma configuração especial
Quando usado popovers em elementos com uma classe .btn-group ou .input-group, você precisa especificar a opção container: 'body' para evitar efeitos colaterais indesejados.
Popover estático
Quatro opções disponíveis: top, right, bottom e lefta linhados.
Popover no Topo
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover Direita
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover em Baixo
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover esquerda
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Demo
Nas quatro direções
Usando o atributo data-placement="" com as opções left, top, bottom e right.
Como usar
Habilite o popover via JavaScript.
$('#exemplo').popover(options)
Opções
As opções podem ser passadas via atributos de dados ou JavaScript. Para os atributos de dados, acrescente o nome da opção data-, como em data-animation="".
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| animation | boolean | true | aplica um CSS fade transition no popover. |
| inherit | string | null | Insere a cor da propriedade CSS no título do popover. Em ícones busca no css do :before |
| html | boolean | false | Insere HTML dentro do popover, se falso, o JQuey vai inserir um texto no conteúdo do DOM. |
| placement | string | function | 'right' |
como posicionar o popover - top | bottom | left | right | auto.
Quando "auto" é especificado, o popover será reorientado dinamicamente. Por exemplo, se o placement é "auto left", o tooltip será exibido à esquerda quando possível, caso contrário, ele será exibido na direita. |
| selector | string | false | Se um seletor é fornecido, o objeto do tooltip será delegado para ele. Na pratica, isso é é usado para permitir que o popover tenha conteúdo HTML dinâmico. |
| trigger | string | 'click' | como o popover é acionado - click | hover | focus | manual |
| title | string | function | '' | valor padrão, se não houver o atributo title, ele não estará presente. |
| content | string | function | '' | valor padrão, se não houver o atributo data-content, ele não estará presente. |
| delay | number | object | 0 |
o delay de show (mostrar) ou hide (ocultar) o popover (ms) - não se aplica ao tipo de disparo manual.
Se um número é fornecido, o delay é aplicado em ambos show/hide. A estrutura do objeto é: delay: { show: 500, hide: 100 }
|
| container | string | false | false |
Acrescenta o popover a um elemento específico.
Exemplo: container: 'body'.
Está opção é particularmente útil na medida em que permite posicionar o popover no fluxo do documento próximo do elemento - gatilho que irá impedir que o popover flutuem para longe do elemento de disparo, durante um redimensionamento da janela. |
Herança de cores no título do popover
Para que o título do popover tenha a mesma cor do elemento que ativa o popover, basta adicionar o atributo data-inherit="", as opções desse atributo são color e background-color, com a propriedade CSS onde ele deve buscar a cor para o título.
Para que a cor herdada apareça como background do título do popover, adicione data-inherit-apply="background", lembrando que o texto do título ficará em branco.
Atributos de dados para popovers individuais
Opções para popovers individuais podem, alternativamente, ser especificados através da utilização de dados de atributos, tal como explicado acima.
Remarcação
Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.
Métodos
| Método | Descrição | Código |
|---|---|---|
| $().popover(options) | Anexa um marcador para uma sequencia de elementos. | |
| .popover('show') | Revela o elemento popover. | $('#exemplo').popover('show') |
| .popover('hide') | Escondo o elemento popover. | $('#exemplo').popover('hide') |
| .popover('toggle') | Alterna o elemento popover. | $('#exemplo').popover('toggle') |
| .popover('destroy') | Destrói o elemento popover. | $('#exemplo').popover('destroy') |
Eventos
| Tipo de evento | Descrição |
|---|---|
| show.bs.popover | Este evento é acionado imediatamente quando o método de instância show é chamado. |
| shown.bs.popover | Este evento é disparado quando o popover foi tornado visível ao usuário (vai esperar para transições CSS se completarem). |
| hide.bs.popover | Este evento é acionado imediatamente quando o método de instância hide foi chamado. |
| hidden.bs.popover | Este evento é disparado quando o popover terminou sendo escondido do usuário (vai esperar para transições CSS se completarem). |
$('#myPopover').on('hidden.bs.popover', function () {
// Faça algo aqui…
})