Feature Request: Mouseover/hover reveals additional text

[NovasTaylor]

A feature request for a possible future release.
Allow display of additional text when the mouse hovers over the node. Possibly leverage jsTree hover_node?

.on("hover_node.jstree" ....

This could be used to provide additional information about the node that is too long to display as the node text.

I'm happy to use a work-around if there is already one in place.

Keep up the great work!

[bellma-lilly]

Interesting idea!

[obkhan]

How about adding a HTML in the hover over feature?

Maybe this would allow flexibility so a tooltip could be added with multiple links or images and be clickable ?

[trafficonese]

You could implement some functionality with pure JS:

  $('#treeID').on("hover_node.jstree", function (node) {
    console.log("Tree is hovered");
    console.log(node);
  });

And if you want Shiny to know about it you could add the following in the JS snippet.
Shiny.setInputValue("hoverednode", node)
This allows you to listen to input$hoverednode in your server function.

Whole Shiny example:

library(shiny)
library(shinyTree)

js <- HTML("
$(document).on('shiny:connected', function(event) {
  $('#tree').on('hover_node.jstree', function (e, data) {
    var nodetext = data.node.text;
    Shiny.setInputValue('hoverednode', nodetext + ' is hovered on');
  });
});
")

ui <- fluidPage(
  tags$head(tags$script(js)),
  shinyTree("tree"),
  br(),
  verbatimTextOutput("hoverinfo")
)

server <- function(input, output, session) {
  output$tree <- renderTree({
    list(
      root1 = structure("123"),
      root2 = list(
        SubListA = list(leaf1 = "", leaf2 = "", leaf3=""),
        SubListB = list(leafA = "", leafB = "")
      )
    )
  })

  output$hoverinfo <- renderText({
    req(input$hoverednode)
    input$hoverednode
  })
}

shinyApp(ui, server)

[obkhan]

This above is very helpful, could it be extended to have a tooltip as this fiddle?

http://jsfiddle.net/ermakovnikolay/qy3gkc2v/

Or could title be set on the node like here?

https://stackoverflow.com/questions/7096803/jquery-jstree-add-a-tooltip

[YsoSirius]

Here are 2 hacky solutions for tooltips. There are definitly better options to go about that, but anyway; sharing is caring ;)

1. Either you set a title for the node, which will give you standard browser tooltips:

library(shiny)
library(shinyTree)

js <- HTML("
$(document).on('shiny:connected', function(event) {
  $('#tree').on('hover_node.jstree', function (e, data) {
    $('#'+data.node.id).prop('title', 'The node id is: ' + data.node.id + 
                                      ' \\nThe node text is: ' + data.node.text);
  })
});")

ui <- {fluidPage(
  tags$head(tags$script(js)),
  shinyTree("tree")
)}

server <- function(input, output, session) {
  output$tree <- renderTree({
    list(
      root1 = structure("123"),
      root2 = list(
        SubListA = list(leaf1 = "", leaf2 = "", leaf3=""),
        SubListB = list(leafA = "", leafB = "")
      ),
      root3 = structure("123"),
      root4 = structure("123"),
      root5 = structure("123"),
      root6 = structure("123")
    )
  })
}

shinyApp(ui, server)

2. Or you render the tooltip within shiny's renderUI, which is a bit more complicated as you have to figure out the tooltip position and set top/left-CSS properties first:

library(shiny)
library(shinyTree)

js <- {HTML("
$(document).on('shiny:connected', function(event) {
  $('#tree')
      .on('hover_node.jstree', function (e, data) {
        var $node = $('#' + data.node.id);
        var x = $node.position().top,
             y = $node.position().left;
      
        Shiny.setInputValue('hoverednode', data.node.text);
        var tooltipSpan = $('#hoverinfo')[0];
        tooltipSpan.style.opacity = 1;
        tooltipSpan.style.top = x + 'px';
        tooltipSpan.style.left = y + 160 + 'px';
      })
      .on('dehover_node.jstree', function(e, data) {
        var tooltipSpan = $('#hoverinfo')[0];
        tooltipSpan.style.opacity = 0;
      });
});")}

css <- {HTML("
#hoverinfo {
  position: absolute;
  background-color: black;
  color: #fff;
  z-index: 10;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  font-weight: bold;
  opacity: 0;
}
")}

ui <- {fluidPage(
  tags$head(tags$script(js)),
  tags$head(tags$style(css)),
  shinyTree("tree"),
  uiOutput("hoverinfo", inline=T)
)}

server <- function(input, output, session) {
  output$tree <- renderTree({
    list(
      root1 = structure("123"),
      root2 = list(
        SubListA = list(leaf1 = "", leaf2 = "", leaf3=""),
        SubListB = list(leafA = "", leafB = "")
      ),
      root3 = structure("123"),
      root4 = structure("123"),
      root5 = structure("123"),
      root6 = structure("123")
    )
  })
  
  output$hoverinfo <- renderUI({
    req(input$hoverednode)
    paste("The hovered node text is: ", input$hoverednode)  
  })
}

shinyApp(ui, server)