【问题标题】:Add bootstrap tooltip to column header in shiny app在闪亮的应用程序中将引导工具提示添加到列标题
【发布时间】:2016-03-01 18:12:39
【问题描述】:

我正在尝试向数据表的每个列标题添加工具提示,但失败了。谁能教我如何使用 jQuery 来做到这一点。

谢谢

  shinyApp(
    ui = fluidPage(
      fluidRow(
        tags$head(
          tags$script( src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"),
          tags$script( src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js")
        ),


        column(12,    tableOutput('table')




        )
      )
    ),
    server = function(input, output) {
      output$table <- renderTable(iris)
    }
  )


  # DataTables example
  shinyApp(
    ui = fluidPage(
      fluidRow(
        column(12,
               dataTableOutput('table')
        )
      )
    ),
    server = function(input, output) {
      output$table <- renderDataTable(iris)
      tags$head(tags$script("
        $('table th').each(    function(){ console.log( $(this).text());
                             $(this).attr('data-toggle', 'tooltip')
                            $(this).attr('title', 'example text')
                            $(this).tooltip();
        );




        "))
    }
  )

【问题讨论】:

  • 请注意代码中冒犯性或不专业的措辞。这里的一些人对此非常敏感,它可能会吸引其他毫无根据的反对票。

标签: shiny jquery-tooltip


【解决方案1】:

添加一个js函数到initComplete解决问题

output$table <- renderDataTable(iris,
                                  options = list(
                                    pageLength = 5,
                                    initComplete = I("function(settings, json) {alert('Done.');
                                      $('th').each( function(){this.setAttribute( 'title', 'Hihihi' );});  
                                      $('th').tooltip(); 

                                     }")
                                  )

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2018-12-28
    • 2021-08-22
    • 1970-01-01
    • 2013-03-08
    • 2015-06-15
    • 2017-01-16
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多