Add info pop-ups to table variables

[eam5]

Find way to add hover/click pop-ups or tooltips for variable definitions

[eam5]

Implementation with DataTables not working - issue with tooltips not "refreshing" after reactive element state change (input$time, input$court, input$selected_language). Seems to be related to issue referred to here: rstudio/DT#492 (comment)

Attempt using callback in DT options to add js function for tooltips per Bootstrap 4 tooltips and https://stackoverflow.com/a/31508033:
Enable tooltips in footer.html

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script>
  $(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>

Add tooltips via callback JS in renderDT:

output$plaintiff_table <- DT::renderDT({
    datatable(df(),
              rownames = FALSE,
              caption = i18n$t("Sources: Legal Services Corporation (lsc.gov)"),
              class = "display nowrap",
              filter = "top",
              options = list(
                searchHighlight = TRUE,
                scrollX = TRUE,
                pageLength = 20,
                order = list(2, "desc"), # column indexing starts at 0 (3rd column visually is indexed as 2)
                dom = "lfrtip",
                language = if (input$selected_language == "Español") {
                  # Data table translation options: https://datatables.net/plug-ins/i18n/#Translations
                  list(url = "//cdn.datatables.net/plug-ins/1.13.4/i18n/es-MX.json")
                } else {
                  NULL
                }),
              colnames = c(i18n$t("Court Jurisdiction"), i18n$t("Plaintiff Name"), 
                           i18n$t("Cases Filed"), i18n$t("Eviction Judgments"), i18n$t("Serial Filings"),
                           i18n$t("Time Frame"), i18n$t("Known Virginia Defendant ZIP Codes")),
            #NEED TO FIX BELOW TO CALL TO A UNIQUE TABLE ID/DATA TABLE ID CHANGES WITH EACH REACTIVE INPUT
              callback = JS("
                var tips = ['The general district court where the case was filed. Court jurisdictions are tied to localities (counties or cities) in Virginia.',
                 'The entity filing an eviction case against a tenant with the court. In Virginia, eviction cases can be filed by \"the landlord, [their] agent, attorney, or other person.\"', 
                 'The total number of eviction cases filed by the plaintiff in the selected time period and jurisdiction.',
                'The total number of cases filed by the plaintiff that ended in an eviction judgment (a judgment for the plaintiff).', 
                  'We consider serial cases to be repeated cases filed by a given plaintiff against a given defendant in a given ZIP code within a 12-month period.',
                  'Time period(s) of total filings and evictions. Shown as all years, by year, or by month based on selection above.',
                  'The ZIP codes provided for the defendants (tenants) against whom the unlawful detainer/eviction is filed.'
                  ],
                  header = $('#plaintiff_table th');
                for (var i = 0; i < tips.length; i++) {
                  $(header[i]).append('<svg version=\"1.1\" id=\"tooltip-icon\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 16 16\" width=\"16px\" height=\"16px\" style=\"enable-background:new 0 0 16 16;margin-left:10px;margin-bottom:3px;\" xml:space=\"preserve\"><path d=\"M14.5,8c0-3.59-2.91-6.5-6.5-6.5S1.5,4.41,1.5,8s2.91,6.5,6.5,6.5S14.5,11.59,14.5,8z M0,8c0-4.42,3.58-8,8-8 s8,3.58,8,8s-3.58,8-8,8S0,12.42,0,8z M5.31,5.17C5.55,4.47,6.22,4,6.96,4h1.82c1.09,0,1.97,0.88,1.97,1.97 c0,0.71-0.38,1.36-0.99,1.71L8.75,8.26C8.74,8.67,8.41,9,8,9C7.58,9,7.25,8.67,7.25,8.25V7.83c0-0.27,0.14-0.52,0.38-0.65l1.38-0.79 C9.16,6.3,9.25,6.14,9.25,5.97c0-0.26-0.21-0.47-0.47-0.47H6.96c-0.11,0-0.2,0.07-0.23,0.17L6.71,5.71C6.57,6.1,6.14,6.3,5.75,6.16 S5.16,5.59,5.3,5.21L5.31,5.17L5.31,5.17z M7,11c0-0.55,0.45-1,1-1s1,0.45,1,1s-0.45,1-1,1S7,11.55,7,11z\"/></svg>');
                  $(header[i]).find('svg').attr('data-toggle', 'tooltip');
                  $(header[i]).find('svg').attr('data-placement', 'top');
                  $(header[i]).find('svg').attr('title', tips[i]);
                }
                ")
    )
}, server = TRUE)

Also attempted popup solution with tooltips seen here, with same results: https://stackoverflow.com/a/71219562

No package solutions could be found atm due to their use of Bootstrap 3 components