Как применить popper.js к разным элементам?

Всем привет.

Использую popper.js с jquery без bootstrap. Как сделать так, чтобы разная кнопка вызывала разный поппер? И при клике в другое место, чтобы попер скрывался?

    <button class="popper"></button>
    <div class="tooltip">
    wow поппер1
    </div>
    <button class="popper"></button>
    <div class="tooltip">
   wow поппер2
    </div>
    <button class="popper"></button>
    <div class="tooltip">
    wow поппер3
    </div>

Тут jquery код

var ref = $('.popper');
var popup = $('.tooltip');
popup.hide();
ref.click(function(){
    popup.show();
    var popper = new Popper(ref,popup,{
        placement: 'top',
        modifiers: {
            flip: {
                behavior: [
                    'left',
                    'right',
                    'top',
                    'buttom'
                ]
            },
            offset: {
                enabled: true,
                offset: '0,10'
            }
        }
    })
})