tutoriais mais recente desenvolvimento web
 

Bootstrap JS Popover

❮ Anterior Próxima Referência ❯

JS Popover (popover.js)

O Popover plugin é semelhante a dicas de ferramentas; é uma caixa de pop-up que aparece quando o usuário clica em um elemento. A diferença é que o popover pode conter muito mais conteúdo.

Dependência Plugin: Popovers requer o plug-in dica (tooltip.js) a serem incluídos na sua versão do Bootstrap .

Para um tutorial sobre Popovers , leia nossa Bootstrap Popover Tutorial .

Via data-* Atributos

A data-toggle="popover" ativa o popover .

O title atributo especifica o texto do cabeçalho do popover .

O data-content atributo especifica o texto que deve ser exibido dentro da popover's corpo.

Exemplo

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

via JavaScript

Popovers não são plugins só de CSS, e deve, portanto, ser inicializado com jQuery: selecione o elemento especificado e chamar o popover() método.

Exemplo

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

// Select a specified element
$('#myPopover').popover();
Tente você mesmo "

Popover Opções

Opções podem ser passadas através de atributos de dados ou JavaScript. Para atributos de dados, acrescentar o nome de opção para data- , como em data-placement="" .

Nome Digitar Padrão Descrição Tente
animationbooleantrue

Especifica se deseja adicionar um efeito de transição CSS desvanece-se ao abrir e fechar o popover

  • true - Adicionar um efeito de desvanecimento
  • false - Não adicionar um efeito de desvanecimento
Tente
containerstring, or the boolean falsefalse Acrescenta o popover a um elemento específico.
Exemplo: container: 'body' 		Tente
contentstring"" Especifica o texto dentro do popover's body Tente
delaynumber, or object0 Especifica o número de milissegundos que irá tomar para abrir e fechar o popover .

Para especificar um atraso para a abertura e outro para o fechamento, use a estrutura do objeto:

delay: {show: 500, hide: 100} - que terá 500 ms para abrir o popover , mas apenas 100 ms para fechá-la 		Tente
htmlbooleanfalse Especifica se a aceitar tags HTML na popover :
  • true - Aceitar tags HTML
  • false - Não aceite tags HTML
Nota: O HTML deve ser inserido no atributo do título (ou usando a opção do título).

Quando definida como false (padrão), do jQuery text() será utilizado método. Use isso se você está preocupado com ataques XSS 		Tente
placementstring"right" Especifica o popover posição. Valores possíveis:

  • "top" - Popover no topo
  • "bottom" - Popover na parte inferior
  • "left" - Popover na esquerda
  • "right" - Popover à direita
  • "auto" - Permite que o navegador decidir a posição do popover . Por exemplo, se o valor for "auto left" , o popover será exibido no lado esquerdo quando possível, caso contrário, à direita. Se o valor for "auto bottom" , o popover irá exibir na parte inferior quando possível, caso contrário, no topo
Tente
selectorstring, or the boolean falsefalse Adiciona o popover a um selector especificado Tente
templatestring  HTML Base para usar ao criar o popover.

O popover's título será injetado no .popover-título.

O popover's conteúdo será injetado no .popover-content.

.arrow se tornará o popover's seta.

O elemento envoltório externo deve ter a .popover classe.
titlestring"" Especifica o texto do cabeçalho do popover Tente
triggerstring"click" Especifica como o popover é acionado. Valores possíveis:

  • "click" - Acionar o popover com um clique
  • "hover" - Acionar o popover em foco
  • "focus" - Acionar o popover quando se obtém o foco (por tabulação ou clicando .eg)
  • "manual" - Acionar o popover manualmente
Dica: Para passar vários valores, separe-os com um espaço 		Tente
viewportstring, or object{selector: "body", padding: 0} Mantém o popover dentro dos limites deste elemento.

Exemplo: viewport: '#viewport' ou {selector: '#viewport', padding: 0}

Popover Métodos

A tabela a seguir lista todos disponíveis popover métodos.

Método Descrição Tente
.popover( options ) Ativa o popover com uma opção. Veja opções acima para valores válidos Tente
.popover("show") Mostra o popover Tente
.popover("hide") Esconde o popover Tente
.popover("toggle") Alterna o popover Tente
.popover("destroy") Esconde e destrói o popover Tente

Popover Eventos

A tabela a seguir lista todos disponíveis popover eventos.

Evento Descrição Tente
show.bs.popover Ocorre quando o popover está prestes a ser mostrado Tente
shown.bs.popover Ocorre quando o popover é totalmente mostrado (após transições CSS foram concluídas) Tente
hide.bs.popover Ocorre quando o popover é prestes a ser ocultado Tente
hidden.bs.popover Ocorre quando o popover está totalmente oculto (após transições CSS foram concluídas) Tente
Exemplos

Exemplos

Personalizado Popover projeto

Use CSS para personalizar a aparência do popover :

Exemplo

 /* 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;
}
Tente você mesmo "

❮ Anterior Próxima Referência ❯