popover bootstrap table row

popover_in_table.js

// WORK IN PROGRESS
// Issues:
//  - Don't know how to position the popover
//  - <a> inside the popover doesn't work

require([
    'jquery',
    'underscore',
    'splunkjs/mvc',
    'views/shared/results_table/renderers/BaseCellRenderer',
    'bootstrap.popover',
    'splunkjs/mvc/simplexml/ready!'
], function($, _, mvc, BaseCellRenderer) {
    var PopOverCellRenderer = BaseCellRenderer.extend({
        canRender: function(cell) {
            return (cell.field === 'popup');
        },
        render: function($td, cell) {
            var links = cell.value.split("⌘");

            var actions_button = $('<a class="btn popdown-toggle" href="#"><span>Actions</span><span class="caret"></span></a>');

            $td.html(actions_button);

            var template = '<div class="popover dropdown-menu open" data-render-time="0.007" style="left: 90px !important;">'
                + '<div class="arrow" style="margin-left: -8px;"></div>'
                + '<div class="popover-inner">'
                + '<div class="popover-content"><p></p></div>'
                + '</div>'
                + '</div>';

            var content = '<ul>';

            _.each(links, function(link) {
                var data = link.split("|");
                var label = data[0];
                var url = data[1];

                content += '<li><a href="' + url + '">' + label + '</a></li>';
            });

            content += '</ul>';

            $(actions_button).popover({
                html: true,
                //trigger: "focus",
                placement: 'bottom',
                template: template,
                content: content,
            });

        }
    });
    mvc.Components.get('table').getVisualization(function(tableView) {
        tableView.addCellRenderer(new PopOverCellRenderer());
    });
});