Locaweb Style

Documentação

Saiba todas as features que te ajudarão a produzir sistemas mais rapidamente.

Popover

Balões de informação.

Componente

Hover (left) Start opened Click (top) Click (bottom) Click (right) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<a href="#" class="ls-btn-primary" data-ls-module="popover" data-trigger="hover" data-title="Titulo do popover 3" data-content="<p>Conteúdo do popover 3</p>" data-placement="left">
  Hover (left)
</a>
<a href="#" class="ls-btn-primary" data-ls-module="popover" data-ls-popover="open" data-title="Titulo do popover 2" data-content="<ul class='ls-no-list-style'>
  <li>Lista 1</li>
  <li>Lista 2</li>
  <li>Lista 3</li>
</ul>" data-placement="top">
  Start opened
</a>
<a href="#" class="ls-btn-primary" data-ls-module="popover" data-title="Titulo do popover 2" data-content="<ul class='ls-no-list-style'>
  <li>Lista 1</li>
  <li>Lista 2</li>
  <li>Lista 3</li>
</ul>" data-placement="top">
  Click (top)
</a>
<a href="#" class="ls-btn-primary" data-ls-module="popover" data-title="Titulo do popover 1" data-content="<p>Conteúdo do popover 1 Conteúdo do popover 1 Conteúdo do popover 1 Conteúdo do popover 1 Conteúdo do popover 1 </p>" data-placement="bottom">
  Click (bottom)
</a>
<a href="#" class="ls-btn-primary" data-custom-class="ls-color-success" data-ls-module="popover" data-title="Titulo do popover 4" data-content="<p>Conteúdo do popover 4</p>" data-placement="right">
  Click (right)
</a>

<a href="#" class="ls-ico-help ls-float-right" data-trigger="hover" data-ls-module="popover" data-placement="left" data-content="Aqui usamos a classe <strong class='ls-color-danger'>.ls-ico-help</strong>" data-title="Popover com ícone de ajuda"></a>

Como usar

Nome Tipo Padrão Descrição
data-ls-module popover - inicia o módulo de popover. Deve ser colocado no elemento que chamará o popover
data-trigger hover - define qual a interação pelo qual o popover irá aparecer. Por padrão, o popover só aparece com click, mas esse atributo substitui o click pelo hover
data-placement top / bottom / left / right top posiciona o popover
data-title text - insere o título no popover
data-content texto e/ou tags HTML -- insere o conteúdo no popover
data-custom-class classe -- permite inserir qualquer classe para customização do popover. Os valores colocados aqui, serão herdados pelo elemento do popover

Popover aberto ao carregar a página

Basta adicionar o atributo data-ls-popover="open". 

1

    <a href="#" class="ls-ico-help" data-ls-popover="open" data-placement="right" data-ls-module="popover" title="Titulo" data-content="Exemplo de popover Aberto, <br> ao carregar a página."></a>

Eventos

Evento Descrição
popover:closed

Quando um popover fecha, o evento popover:closed é disparado no elemento do popover, aquele que recebe a classe ls-popover. Veja exemplo abaixo.
popover:opened

Quando o elemento que chama o popover é clicado (ou quando ouver hover), ele emite um evento chamado popover:called

popover:destroyed

Quando os a função locastyle.popover.destroy() é acionado, ele emite um evento chamado popover:destroyed

Exemplo: 

1
2
3
4
5
6
7
8
9
10

// Um popover específico, caso você saiba o ID
// (os IDs dos popovers são atribuidos pelo próprio módulo)
$("#id-do-popover").on('popover:opened', function(){
  // do something
});

// Todos os elementos de popover
$(".ls-popover").on('popover:closed', function(){
  // do something
});