English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutorial básico do Bootstrap

Plugin do Bootstrap

Plugin de caixa pop-up (Popover) do Bootstrap

O plugin de caixa pop-up (Popover) do Bootstrap é semelhante ao plugin de dica (Tooltip) e oferece uma visão expandida. Para ativar a caixa pop-up, o usuário precisa apenas passar o mouse sobre o elemento. O conteúdo da caixa pop-up pode ser preenchido completamente usando o API de dados Bootstrap (Bootstrap Data API). Este método depende da dica (tooltip).

Se você quiser usar funcionalidades específicas do plugin, você precisa referenciar popover.js， depende de plugin de dica (Tooltip)。Ou, conforme Visão geral de plugins Bootstrap como mencionado no capítulo bootstrap.js ou a versão comprimida bootstrap.min.js.

Uso

O plugin de caixa pop-up (Popover) gera conteúdo e marcadores conforme necessário, por padrão, coloca a caixa pop-up (popover) atrás do elemento de ativação. Você pode adicionar a caixa pop-up (popover) de duas maneiras:

  • através do atributo de dados：Para adicionar um Popover(popover), basta adicionar um锚/Adição de rótulo de botão data-toggle="popover" Basta fazer isso. O título da âncora é o texto do Popover(popover). Por padrão, o plugin coloca o Popover(popover) no topo.

    <a　href="#"　data-toggle="popover"　title="Exemplo de Popover"
　　　　Fique suspenso sobre mim
</a>

  • Através de JavaScript:Ativar Popover(popover) através de JavaScript:

    $('#identifier').popover(options)

O plugin de Popover(Popover) não é um plugin puramente CSS como os menus suspenso e outros plugins discutidos anteriormente. Para usar este plugin, você deve ativar com jQuery (ler JavaScript). Use o seguinte script para ativar todos os popovers(popover) na página:

$(function　()　{　$("[data-$("[data-toggle='popover']").popover();　});

Exemplo online

O exemplo a seguir demonstra como usar o plugin de Popover(Popover) através do atributo de dados.

Exemplo online

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Plugin de Popover(Popover) </title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container"　style="padding:　100px　50px　10px;">
	<button type="button" class="btn btn-default"　title="Título do Popover"　　
			data-container="body"　data-toggle="popover"　data-colocação="esquerda"　
			data-content="Alguns conteúdos do Popover à esquerda">
		do lado esquerdo do Popover
	</button>
	<button type="button" class="btn btn-primary"　title="Título do Popover"　　
			data-container="body"　data-toggle="popover"　data-colocação="superior"　
			data-content="Alguns conteúdos do Popover no topo">
		Popover na parte superior
	</button>
	<button type="button" class="btn btn-success"　title="Título do Popover"　　
			data-container="body"　data-toggle="popover"　data-colocação="inferior"　
			data-content="Alguns conteúdos do Popover no fundo">
		Popover na parte inferior
	</button>
	<button type="button" class="btn btn-warning"　title="Título do Popover"　　
			data-container="body"　data-toggle="popover"　data-colocação="direita"　
			data-content="Alguns conteúdos do Popover à direita">
		Popover à direita
	</button>
</div>
<script>
$(function　()　{　
	$("[data-$("[data-toggle='popover']").popover();
});
</script>
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

Opções

Algumas opções são adicionadas pelo Bootstrap Data API ou chamadas por JavaScript. A tabela a seguir lista essas opções:

Nome da opçãoTipo/Valor padrãoNome do atributo de dadosdescrição
animationboolean
Valor padrão: true		data-animationAplicar efeito de transição de desbotamento CSS ao pop-up.
htmlboolean
Valor padrão: false		data-htmlInserir HTML no pop-up. Se for false, o método jQuery text será usado para inserir conteúdo no DOM. Se você se preocupar com ataques XSS, use text.
placementstring|function
Valor padrão: top		data-placementEspecificar como posicionar o pop-up (ou seja, top|bottom|left|right|auto).
Quando especificado auto O pop-up será ajustado dinamicamente. Por exemplo, se o placement for "auto left", o pop-up será exibido na esquerda sempre que possível, e na direita apenas quando não for possível.
selectorstring
Valor padrão: false		data-selectorSe fornecido um seletor, o objeto do pop-up será delegado ao alvo especificado.
titlestring | function
Valor padrão: ''		data-titleSe não for especificado title Se não for especificado, o valor padrão da opção title é o valor padrão title.
triggerstring
Valor padrão: 'hover focus'		data-triggerDefinir como o pop-up será acionado: click| hover | focus | manual. Você pode passar vários triggers, separados por espaço.
delaynumber | object
Valor padrão: 0		data-delayMilissegundos de atraso para exibir e ocultar o pop-up. - Não se aplica ao tipo de trigger manual. Se for fornecido um número, o atraso será aplicado tanto para exibir quanto para ocultar. Se for fornecido um objeto, a estrutura será como follows:
delay:
{　show:　500,　hide:　100　}
containerstring | false
Valor padrão: false		data-containerAdicionar pop-up ao elemento especificado.
Exemplo: container: 'body'

Métodos

A seguir estão alguns métodos úteis no plugin Popover:

MétodosdescriçãoExemplo
Opções: .popover(options)Adicionar handlers de pop-up para conjuntos de elementos.
$().popover(options)
Alternar: .popover('toggle')Alternar a exibição/Ocorrerá a ocultação do pop-up do elemento.
$('#element').popover('toggle')
Exibir: .popover('show')Ocorrerá a exibição do pop-up do elemento.
$('#element').popover('show')
Ocultar: .popover('hide')Ocorrerá a ocultação do pop-up do elemento.
$('#element').popover('hide')
Destruir: .popover('destroy')Oculta e destrói o Popover do elemento.
$('#element').popover('destroy')

Exemplo online

O exemplo a seguir demonstra os métodos do plugin Popover(Popover):

Exemplo online

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Métodos do plugin Popover(Popover)插件方法/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container"　style="padding:　100px　50px　10px;">
	<button type="button" class="btn btn-popover padrão-show"　
			title="Título do Popover" data-container="body"　
			data-toggle="popover"　data-colocação="esquerda"　
			data-content="do lado esquerdo do Popover algumas informações - método show">
		do lado esquerdo do Popover
	</button>
	<button type="button" class="btn btn-popover primário-hide"　
			title="Título do Popover" data-container="body"　
			data-toggle="popover"　data-colocação="superior"　
			data-content="Conteúdo do Popover na parte superior - método hide">
		Popover na parte superior
	</button>
	<button type="button" class="btn btn-popover de sucesso-destroy"　
			title="Título do Popover" data-container="body"　
			data-toggle="popover"　data-colocação="inferior"　
			data-content="Conteúdo do Popover na parte inferior - método destroy">
		Popover na parte inferior
	</button>
	<button type="button" class="btn btn-popover de aviso-toggle"　
			title="Título do Popover" data-container="body"　
			data-toggle="popover"　data-colocação="direita"　
			data-content="Conteúdo do Popover à direita - método toggle">
		Popover à direita
	</botão"><br><br><br><br><br><br>
	<p　class="popover-opções">
		<a　href="#"　type="button"　class="btn　btn-aviso"　title="<h2>Título</h2>"　　
		　　　data-container="body"　data-toggle="popover"　data-content="
																	　<h4>Conteúdo do Popover - método options</h4>">
			Popover
		</a>
	</p>
	<script>
		$(function () { $('.popover-show').popover('show');});
		$(function () { $('.popover-hide').popover('hide');});
		$(function () { $('.popover-destroy').popover('destroy');});
		$(function () { $('.popover-toggle').popover('toggle');});
		$(function　()　{　$(".popover-options　a").popover({html　:　true　});});
	</script>
</div>
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

evento

A tabela a seguir lista os eventos utilizados pelo plugin de Popover. Esses eventos podem ser usados como ganchos em funções.

eventodescriçãoExemplo
show.bs.popoverEste evento é acionado imediatamente quando o método show é chamado.
$('#mypopover').on('show.bs.popover', function () {
　　//　Executar algumas ações...
)
shown.bs.popoverEste evento é acionado quando o Popover é visível para o usuário (esperando o efeito de transição CSS ser concluído).
$('#mypopover').on('shown.bs.popover', function () {
　　//　Executar algumas ações...
)
hide.bs.popoverEste evento é acionado imediatamente quando o método hide é chamado.
$('#mypopover').on('hide.bs.popover', function () {
　　//　Executar algumas ações...
)
hidden.bs.popoverEste evento é acionado quando o Popover é escondido do usuário (esperando o efeito de transição CSS ser concluído).
$('#mypopover').on('hidden.bs.popover', function () {
　　//　Executar algumas ações...
)

Exemplo online

O exemplo a seguir demonstra os eventos do plugin Popover (Popover):

Exemplo online

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Evento do plugin Popover (Popover) </title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div clas="container" style="padding:　100px　50px　10px;">
	<button type="button" class="btn btn-popover primário-show"　
			title="Título do Popover" data-container="body"　
			data-toggle="popover"　
			data-content="do lado esquerdo do Popover algumas informações - método show">
		do lado esquerdo do Popover
	</button>
</div>
<script>
	$(function () { $('.popover-show').popover('show');});
	$(function () { $('.popover-show').on('shown.bs.popover', function () {
		alert("Mensagem de aviso ao ser exibido");
	})});
</script>
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

Caixa de Aviso BootstrapPlugin de Ferramenta de Dica Bootstrap