As a dedicated user of the jsTreeR package within Shiny, I have been exploring the functionality it offers. By executing the code below, users are presented with a draggable menu at the top, allowing them to drag items down to the designated list labeled ">> Drag here <<" to create a custom sequentially labeled list. Is there a way to incorporate hover-over pop-ups with explanatory text when hovering over these menu items, as shown in the illustration below? How can this be achieved?
Once an element is dragged down, the need for the same hover-over pop-up diminishes, only applicable to elements in the "Menu" section at the top.
https://i.sstatic.net/LJXdH.png
Code:
library(jsTreeR)
library(shiny)
nodes <- list(
list(
text = "Menu",
state = list(opened = TRUE),
children = list(
list(text = "Dog", type = "moveable", state = list(disabled = TRUE)),
list(text = "Cat", type = "moveable", state = list(disabled = TRUE))
)
),
list(text = ">> Drag here <<", type = "target", state = list(opened = TRUE))
)
dnd <- list(
always_copy = TRUE,
inside_pos = "last",
is_draggable = JS(
"function(node) {",
" return node[0].type === 'moveable';",
"}"
)
)
mytree <- jstree(
nodes, dragAndDrop = TRUE, dnd = dnd,
types = list(moveable = list(), target = list())
)
script <- '
$(document).ready(function(){
var LETTERS = ["A", "B", "C"];
var Visited = {};
$("#mytree").on("copy_node.jstree", function(e, data){
var oldid = data.original.id;
var visited = Object.keys(Visited);
if(visited.indexOf(oldid) === -1){
Visited[oldid] = 0;
}else{
Visited[oldid]++;
}
var letter = LETTERS[Visited[oldid]];
var node = data.node;
var id = node.id;
var index = $("#"+id).index() + 1;
var text = index + ". " + node.text + " " + letter;
Shiny.setInputValue("choice", text);
var instance = data.new_instance;
instance.rename_node(node, text);
});
});
'
ui <- fluidPage(
tags$head(tags$script(HTML(script))),
fluidRow(jstreeOutput("mytree"))
)
server <- function(input, output, session){
output[["mytree"]] <- renderJstree(mytree)
}
shinyApp(ui, server)