Question

我想知道是否有一种方法可以使用popst和jstree。我有一个jstree，我想在点击一个节点时调出一个popover。

到目前为止我所拥有的是：

// Left click jstree node for popover 
$("#jstree").bind("select_node.jstree", function (e, data){

    //Code to display tooltip/popover
});

我不知道如何显示popover并且我不确定popover如何知道要显示的html元素。

感谢您的帮助

Answer 1

您可以使用此方法：

}).bind('hover_node.jstree', function(e, data) {
   if(!$("li[id='"+data.node.id+"'] > a").hasClass("popovers"))
   {
      $("li[id='"+data.node.id+"'] > a").addClass("popovers");
   }
      $("li[id='"+data.node.id+"'] > a").popover(
            { trigger: "hover",container: '#TreeCode',title:'Test'
                              ,content:"Test",placement:'left',offset: '0 10px' });
})

弹出窗口的初始化将帮助您创建它。此外，您可以动态使用`数据对象来显示有关弹出事件的不同数据。

Answer 2

这可能会对您有所帮助：

//bootstrap tooltipped nodes list
var tooltipped_nodes = [];
$('#jstree')
// listen for event
.on('open_node.jstree', function (e, data) {
    $('#jstree ul li a').each(function(index, item){
        if (jQuery.inArray(index, tooltipped_nodes) == -1){
            $(this).tooltip({
                'placement': 'right',
                'trigger': 'click',
                'title': "Hover over me"
            });
            tooltipped_nodes.push(index);
        }
    });
});

在open_node.jstree事件上，您可以在所需的节点上调用Bootstrap .tooltip()函数;在此示例中，我循环<a>列表中的每个#jstree标记，并添加相同的工具提示为了避免在相同节点上进一步调用，我在tooltipped_nodes数组中推送每个“工具提示”节点索引，但也许可以有更有效的方法来执行此操作。

使用带有JStree的popover

2 个答案: