I visualized in a site that exists in the upper right a dropdown menu where the user can make the selection of the language. Below is a print of the site with the selection option open. When the user clicks Français, for example, the flag of France appears in place of the Brazilian flag. I would like to know how to do this using javascript / jquery! I searched and did not find any code.
As I could not make the tooltip work, I did not put the style, but the basic one you asked for is what I think:
//a estrutura e como esse objeto vai ser populado você decide como vai ser, aqui foi só exemplo
var langList = [
{name: 'Portugues', code:'pt-BR', icon:'https://cdn2.iconfinder.com/data/icons/world-flag-icons/256/Flag_of_Brazil.png'},
{name: 'Ingles', code:'en-US', icon:'http://icons.veryicon.com/png/Flag/Rounded%20World%20Flags/United%20States%20Flag.png'},
]
$(document).ready(function(){
$langs = $('#langs');
$currentLang = $('#current-lang');
var lang;
//aqui é so para popular a lista, ela poderia vir do servidro ja populada tambem
for( var i in langList){
lang = langList[i];
$langs.append('<li data-index="'+i+'" class="lang-picker"><img src="'+lang.icon+'" width="50" /> '+lang.name+'</li>');
}
$('.lang-picker').on('click', function(){
var index = $(this).attr('data-index');
var lang = langList[index];
if(lang){
$currentLang.attr('src', lang.icon);
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><!--Poralgummotivoquedesconhecootooltipdabootstrapnaofuncionouaqui,masoconceitoéomesmo--><imgsrc="https://cdn2.iconfinder.com/data/icons/world-flag-icons/256/Flag_of_Brazil.png" width="50" id="current-lang" />
<br />
Idiomas diponiveis<br>
<ul id="langs">
</ul>