HTML & CSS - Criando Popovers com HTML, CSS e JavaScript (Tooltip e Caixa de Diálogo)

Quer saber mais sobre o nosso Curso Completo de HTML e CSS? Clique no link abaixo para garantir sua vaga na próxima turma: https://dlp.hashtagtreinamentos.com/html-css/espera/impressionador?origemurl=hashtag_yt_org_listaesperahc_TBYavxndc3E PARA BAIXAR O MINICURSO GRATUITO DE HTML E CSS: https://pages.hashtagtreinamentos.com/inscricao-minicurso-basico-html-css2?origemurl=hashtag_yt_org_minihtmlcss_TBYavxndc3E ----------------------------------------------------------------------- ► Arquivos Utilizados no Vídeo: https://pages.hashtagtreinamentos.com/arquivo-htmlcss-1OUmBEg3JxcrRnYt_t3T5oA9xnBp6jtXI?origemurl=hashtag_yt_org_planilhahc_TBYavxndc3E ----------------------------------------------------------------------- Caso prefira o vídeo em formato de texto: https://www.hashtagtreinamentos.com/popovers-html-e-css ----------------------------------------------------------------------- PARA CONTRATAR A HASHTAG PARA SUA EMPRESA: https://www.hashtagtreinamentos.com/treinamentos-corporativos?fonte=yt ----------------------------------------------------------------------- Fala Impressionadores! Na aula de hoje eu vou te ensinar como criar popovers com HTML, CSS e JavaScript. Claro, antes de tudo vou te explicar o que é um popover e uma tooltip, e para esse projeto, nós vamos utilizar a réplica da página do Google que já fizemos aqui no canal (pode acessar o minicurso também para ver esse conteúdo). A ideia é criar aquele menu do Google Apps, onde você clica e aparecem todos os aplicativos do Google. Nós vamos criar o menu daquela forma, onde você clica e aparecem os aplicativos, com nomes e ícones para cada um deles, vamos fazer todas as formatações necessárias, como o hover, layout flex, o grid, personalização da barra de rolagem e muito mais. A ideia é que você consiga criar a sua própria popover e consiga formatá-la para deixar do jeito que precisa! Vou te mostrar várias formatações e recursos que você pode utilizar para criar uma popover do zero! ----------------------------------------------------------------------- Vídeos Recomendados ► Curso Básico de HTML e CSS https://www.youtube.com/watch?v=vtX9BzESWnQ&list=PLpdAy0tYrnKwmcenKePWr9TQ9deRanAr7&pp=iAQB ► Como Baixar e Configurar o VSCode para HTML e CSS https://youtu.be/WyXcfCPlIlk ----------------------------------------------------------------------- Hashtag Programação ► Inscreva-se em nosso canal: http://bit.ly/3c0LJQi ► Ative as notificações (clica no sininho)! ► Curta o nosso vídeo! ----------------------------------------------------------------------- Redes Sociais ► Blog: https://bit.ly/2MRUZs0 ► YouTube: http://bit.ly/3c0LJQi ► Instagram: https://bit.ly/3o6dw42 ► Facebook: http://bit.ly/3qGtaF2 Aqui nos vídeos do canal da Hashtag Programação ensinamos diversas dicas de HTML e CSS para que você consiga se desenvolver nessa linguagem de programação e criar seus próprios projetos! ----------------------------------------------------------------------- Conteúdo da Aula 00:00 Introdução 01:40 Apresentação do site e Google Apps 02:55 Arquivos iniciais 04:22 Ajustes iniciais para começar 06:00 Verificando as configurações da “Caixa Ícone” 07:44 Tooltip no HTML (popover no HTML) 08:58 Criando o popover no HTML 10:19 Formatação do popover 26:39 Layout dos itens + Formatações 40:13 Hover nos itens (CSS aninhado) + Formatação 45:13 Ajuste dos tamanhos 48:04 Personalização da barra de rolagem 54:08 Mostrar todo o texto do item 57:32 Imagem dos ícones 01:08:01 Cursos entre os ícones 01:08:42 Alterando div por âncora + Formatação 01:12:18 Visibilidade da caixa ícone (JavaScript) 01:20:10 Fechar a caixa de ícone ao clicar fora 01:27:47 Conclusão #htmlecss #htmlcss #html #css #hashtagprogramacao