Remove shinyBS hover when dragging

[MayaGans]

I'm using dragulaR to create draggable divs in Shiny, and added a tooltip using shinyBS to each div. I was wondering if it's possible to remove the tooltip (I tried adding some custom jQuery when dragging the div?

library(shiny)
library(dragulaR)
library(shinyBS)

makeElement <- function(data, name)
{
  div(style = "border-width:2px;border-style:solid;",
      drag = name,
      div(class = "active-title-row", id = name, name),
          bsTooltip(id = name, title = "Hover",
                    placement = "top", trigger = "hover"))
}

ui <- fluidPage(

  # Maybe something like this but it doesn't work
  tags$script(HTML(
    "$(function() {
    start: function(event, ui) {             
      $('#bsTooltip').hide();             
    });"
  )),

  titlePanel("Drag and drop elements with dragulaR"),

  fluidRow(style = "margin: 15px;",
           column(3,
                  h3("Drag from here:"),
                  div(id = "Available", style = "min-height: 600px;",
                      lapply(colnames(mtcars), makeElement, data = mtcars))
           ),
           column(3,
                  h3("Drop here:"),
                  div(id = "Model", style = "min-height: 600px;")
           )
  ),
  dragulaOutput("dragula")

)

server <- function(input, output) {

  output$dragula <- renderDragula({
    dragula(c("Available", "Model"))
  })

}

shinyApp(ui = ui, server = server)

Any help appreciated!

[raytong]

Hi @MayaGans. You can do this by adding onmousedown in each element active-title-row to call a script to hide the tooltip as the following. Hope it can help.

library(shiny)
library(dragulaR)
library(shinyBS)

makeElement <- function(data, name)
{
  div(style = "border-width:2px;border-style:solid;",
      drag = name,
      div(class = "active-title-row", id = name, onmousedown = paste0("hideTooltip('", name, "')"), name),
      bsTooltip(id = name, title = "Hover",
                placement = "top", trigger = "hover"))
}

ui <- fluidPage(
  
  tags$script(HTML(
    "function hideTooltip(id) {
      var $id = $('#' + id)
      $id.tooltip('hide');
    }"
  )),
  
 

  titlePanel("Drag and drop elements with dragulaR"),
  
  fluidRow(style = "margin: 15px;",
           column(3,
                  h3("Drag from here:"),
                  div(id = "Available", style = "min-height: 600px;",
                      lapply(colnames(mtcars), makeElement, data = mtcars)
                      )
           ),
           column(3,
                  h3("Drop here:"),
                  div(id = "Model", style = "min-height: 600px;")
           )
  ),
  dragulaOutput("dragula")
  
  )

server <- function(input, output) {
  
  output$dragula <- renderDragula({
    dragula(c("Available", "Model"))
  })
  
}

shinyApp(ui = ui, server = server)

[MayaGans]

Thank you so much this is perfect!