Você já tentou criar um menu suspenso para o seu botão, selecionar, mas foi bloqueado por overflow oculto?

Então o que você faz, bem, então você usa o javascript para lançar o elemento na raiz do DOM e, em seguida, posiciona o elemento com base no retângulo dos elementos do gatilho, recalculando sempre que mudanças de layout, rolagem e redimensionamento da janela acontecem, não muito eficaz.

Quero começar dizendo que ainda não tem suporte completo, mas existe um polyfill para resolver isso por enquanto.

Os dois principais recursos nos quais confiaremos são

posicionamento da âncora

popovers

Então minha ideia inicial surgiu quando vi que a caixa de diálogo era enviada para a raiz, mas com camada DOM. Eu me deparei com a API popover, onde você basicamente obtém a mesma lógica, mas apenas age de maneira um pouco diferente.

Também me lembro de ter visto uma postagem sobre como ancorar um elemento a um polegar em um controle deslizante de intervalo.

Então pensei basicamente no que você quer fazer para qualquer menu suspenso/dica de ferramenta etc. que precise quebrar o estouro oculto se você misturar os dois, não precisará de todo o javascript excessivo.

Então aqui está uma demonstração funcional nos navegadores que o suportam

• Chrome, Edge v125
• Ópera v111
• Chrome para Andriod, navegador Andriod v129

Ok, e se você quiser usá-lo hoje. Bem, existe um polyfill para isso que podemos usar.

O polyfill de posicionamento de âncora estranho/css

Que tem ótimo suporte ao navegador

• Firefox 54
• Chrome 51
• Extremidade 79
• Safari 10

Tente visitar um navegador não mencionado no exemplo sem polyfill e este exemplo abaixo funciona. Eu testei pessoalmente as versões mais recentes do safari e do firefox

Isso significa que sim, na maioria dos navegadores teremos uma sobrecarga extra computada, mas é fácil de usar e desligar quando tivermos compatibilidade suficiente.

Há uma ressalva nessa abordagem: o polyfill tem aproximadamente 92kb de tamanho, o que terá impacto no carregamento, mas você pode carregá-lo lentamente depois que o aplicativo/site terminar de fazer algo importante