Почему не срабатывает popover при hover?(bootstrap 3)

Хочу реализовать popover, который будет содержать в себе кнопки меню и не будет исчезать, если на него навести курсор. Наткнулся на такие варианты:

Пример 1

Пример 2

Решил увязать это дело со своим кодом. Разметка:

кнопка:

<a id="ctabutton_menu" class="ctabutton kl-cta-ribbon ctabutton-custom btn-usermenu" data-toggle="popover">
    <strong>MENU</strong>
    <svg version="1.1" class="trisvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveaspectratio="none" width="14px" height="5px" viewbox="0 0 14.017 5.006" enable-background="new 0 0 14.017 5.006" xml:space="preserve">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.016,0L7.008,5.006L0,0H14.016z">
    </path>
</svg>
</a>

меню:

<div class="user-menu" id="#user_menu_popover">
    <div class="form-group">
        <a href="" class="btn-element btn btn-default btn-sm btn-user-menu">
            <span class="glyphicon glyphicon-user"></span>
             "My profile"
        </a>
    </div>
        <div class="form-group">
            <a href="" class="btn-element btn btn-fullblack btn-sm btn-user-menu">
                <span class="glyphicon glyphicon-tasks"></span>
                "Dashboard"
            </a>
        </div>
    <div>
        <a href="" class="btn-element btn btn-fullcolor btn-sm btn-user-menu">
            <span class="glyphicon glyphicon-log-out"></span>
            "Log OUT" 
        </a>
    </div>
</div>

стили меню:

.user-menu {
  z-index: 150;
  position: fixed;
  background-color: #dddddd;
  max-width: 130px;
  padding: 10px 10px;
  box-shadow: 0 0 5px rgba(0,0,0, 0.4);
  margin-top: 75px;
  right: 45px;
}
.btn-user-menu {
  padding: 10px 15px;
  width: 100%;
}

js код:

$(document).ready(function() {
    $('[data-toggle="popover"]').popover({ trigger: "manual" ,
                                   html: true,
                                   animation:false,
                                   content: function() {
                                      return $('#user_menu_popover').html();
                                   }
                                 })
        .on("mouseenter", function () {
            var _this = this;
            $(this).popover("show");
            $(".popover").on("mouseleave", function () {
                $(_this).popover('hide');
            });
        }).on("mouseleave", function () {
            var _this = this;
            setTimeout(function () {
                if (!$(".popover:hover").length) {
                    $(_this).popover("hide");
                }
            }, 300);
        });
});

К сожалению оно не срабатывает и не могу понять почему. В какую сторону копать?