[MÚSICA]
Vamos agora tentar entender vários mecanismos para nos permitir
exibir informações para os usuários sobrepondo o conteúdo de sua página web.
Então, aqui vamos olhar para três construções diferentes que estão disponíveis no Bootstrap
chamados tooltips, popovers e modals.
Então, o que são dicas de ferramentas, popovers e modais e como eles são úteis?
Vamos olhar para algumas idéias básicas primeiro, e então vamos olhar para alguns exemplos.
No exercício que se segue, usaremos dicas de ferramentas e
modais em nossa página da web, e veremos um exemplo de popovers.
Então, como eu mencionei, dicas de ferramentas, popovers e modais são uma maneira de revelar conteúdo
para os usuários, quando o usuário interage com certos elementos em sua página web.
Digamos, por exemplo, quando o mouse do usuário
clica em um botão, ou passa o mouse sobre um botão, clica em um link
ou atinge um determinado ponto em sua página da Web.
Então, tudo isso irá acionar informações a serem exibidas para os usuários.
Então, neste caso,
as informações são exibidas como uma sobreposição na parte superior da sua página web.
Assim, o conteúdo subjacente da página web ainda está lá, mas
isso é colocado para fora em cima do conteúdo subjacente.
Assim, em termos de flexibilidade, as dicas de ferramentas são as mais simples de implementar, mas
ao mesmo tempo têm flexibilidade limitada em como podem exibir informações. Os
popovers são mais flexíveis do que as dicas de ferramentas, mas também têm suas próprias limitações.
Os Modals oferecem o suporte mais extenso para
exibir conteúdo de uma ampla variedade de maneiras.
Como exemplo, vamos para a nossa página web em que temos trabalhado.
Você vê isso quando passamos o cursor do mouse sobre este botão.
Você vê esta mensagem aparecendo na tela aqui,
com algumas informações adicionais.
Este é um exemplo de uma dica de ferramenta.
Isso permite que você exiba quantidades menores de informações para os usuários.
Então, por exemplo, se você está tentando orientar os usuários através de seu site e
quer que eles saibam o que acontece quando você clica em vários locais em qualquer página da web,
estes talvez uma boa maneira de lembrá-los do que é esperado.
Assim, você pode facilmente projetar, por exemplo,
instruções passo a passo do seu site usando estas dicas de ferramentas para indicar aos usuários.
Se você quiser informações um pouco mais detalhadas,
então popovers seria mais útil.
O mesmo exemplo, implementar e usar um popover seria assim.
Agora, neste caso,
você terá que clicar explicitamente no botão para mostrar o popover.
Então, nesse caso, o popover é mostrado com algumas informações de título, e,
em seguida, o conteúdo real na parte inferior desse popover.
Agora, descartar o popover exigirá que você clique novamente na parte inferior lá.
Então este é o comportamento de um popover.
Em algumas circunstâncias, popovers são mais úteis do que dicas de ferramentas.
Nosso terceiro tipo de sobreposição de dados é o modal.
Um modal permite que você apresente
informações mais detalhadas aos usuários do que uma dica de ferramenta e popover.
O conteúdo do modal é em si dividido em um cabeçalho, corpo e rodapé.
E o próprio modal pode conter informações muito mais detalhadas.
E você pode usar toda a grade Bootstrap,
dentro do corpo modal, para organizar o conteúdo real.
Olhamos para alguns exemplos do uso de modais a seguir.
Indo para a nossa página web, você verá que no lado direito,
aqui temos um link aqui chamado Login.
Então, quando você clicar nesse link, você notará que este modal
com seu formulário de login é exibido na tela.
Então este é o comportamento típico de um modal.
Assim, aqui você pode digitar as informações e,
em seguida, clicar no botão Entrar para entrar no seu site.
Indo para a sua página Coursera, aqui está um exemplo real do uso de um modal.
Então, por exemplo, se você clicar no botão Login aqui,
você pode ver que no Coursera, um formulário aparece na tela.
Então este é outro uso de um modal em sua página web.
Agora que você viu exemplos de dicas de ferramentas, popovers e modais,
vamos para o próximo exercício, onde criaremos uma dica de ferramenta em nossa página index.html.
Também criaremos um modal que permite ao usuário digitar informações para
fazer login em nossa página web.
[ MUSIC]