diff --git a/R/mini-document.R b/R/mini-document.R
index 6e4efab..1a943e4 100644
--- a/R/mini-document.R
+++ b/R/mini-document.R
@@ -25,6 +25,7 @@
 #' @param results_folding Setup results folding by a string, `"none"`, `"show"`,
 #'  or `"hide"`. This feature will fold entire results, including side effects
 #'  such as figures and tables.
+#' @param footenote_tooltip `TRUE` let footnotes to be also shown as tooltips.
 #' @param tabset `TRUE` converts sections to tabs if they belong to the
 #'  `tabset`-class section. The tabs inherit names from the corresponding
 #'  sections. Unlike `rmarkdown::html_document`, the tabs can be navigated by
@@ -59,6 +60,7 @@ mini_document <- function(framework = "sakura",
                           section_divs = TRUE,
                           code_folding = c("none", "show", "hide"),
                           results_folding = c("none", "show", "hide"),
+                          footnote_tooltip = FALSE,
                           tabset = FALSE,
                           code_download = FALSE,
                           self_contained = TRUE,
@@ -81,7 +83,9 @@ mini_document <- function(framework = "sakura",
 
   fmt <- rmarkdown::html_document(
     theme = if (html5) NULL else theme,
-    pandoc_args = spec_pandoc_args(pandoc_args, html5, katex),
+    pandoc_args = spec_pandoc_args(
+        pandoc_args, html5, katex, footnote_tooltip
+    ),
     extra_dependencies = spec_dependencies(
         extra_dependencies,
         html5 = html5,
diff --git a/R/spec-dependencies.R b/R/spec-dependencies.R
index ed46ab6..354e6de 100644
--- a/R/spec-dependencies.R
+++ b/R/spec-dependencies.R
@@ -25,7 +25,6 @@ spec_dependencies <- function(extra_dependencies = NULL,
           paste0(`if`(all_frameworks, default_framework, framework), ".css")
         },
         "common.css",
-        if (with_framework && framework != "mini") "feat-tooltip.css",
         if (toc_float) "feat-toc-float.css"
       ),
       meta = if (all_frameworks) {
diff --git a/R/spec-pandoc-args.R b/R/spec-pandoc-args.R
index 2e64393..5f15312 100644
--- a/R/spec-pandoc-args.R
+++ b/R/spec-pandoc-args.R
@@ -2,16 +2,17 @@
 #' @noRd
 spec_pandoc_args <- function(pandoc_args = NULL,
                              html5 = TRUE,
-                             katex = TRUE) {
-
+                             katex = TRUE,
+                             footnote_tooltip = FALSE) {
   lua <- if (check_pandoc_version(minimum = "2.0.0", recommend = "2.7.2")) {
-    if (html5) {
-      dir(path_mini_resources("lua"), pattern = "\\.lua$", full.names = TRUE)
-    } else {
-      path_mini_resources("lua", "code-folding.lua")
-    }
-  } else {
-    character(0L)
+    path_mini_resources(
+      "lua",
+      c(
+        if (html5) "tooltip.lua",
+        if (footnote_tooltip) "footnote-tooltip.lua",
+        "code-folding.lua"
+      )
+    )
   }
 
   c(
@@ -20,3 +21,4 @@ spec_pandoc_args <- function(pandoc_args = NULL,
     if (katex) "--mathjax"
   )
 }
+
diff --git a/docs/index.Rmd b/docs/index.Rmd
index 1e4acb0..539140c 100644
--- a/docs/index.Rmd
+++ b/docs/index.Rmd
@@ -15,6 +15,7 @@ output:
     toc: true
     toc_float: true
     toc_highlight: true
+    footnote_tooltip: true
     tabset: true
     number_sections: true
     anchor_sections: false
diff --git a/inst/rmarkdown/html/styles/feat-tooltip.css b/inst/rmarkdown/html/styles/feat-tooltip.css
deleted file mode 100644
index b692e64..0000000
--- a/inst/rmarkdown/html/styles/feat-tooltip.css
+++ /dev/null
@@ -1,63 +0,0 @@
-.tooltip {
-  position: relative;
-  display: inline-block;
-}
-
-.tooltip:before, .tooltip:after {
-  position: absolute;
-  opacity: 0;
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(100%);
-  clip-path: inset(100%);
-  transition: all 0.3s;
-  z-index: 1010;
-  left: 50%;
-}
-
-.tooltip:not(.bottom):before, .tooltip:not(.bottom):after {
-  bottom: 75%;
-}
-
-.tooltip.bottom:before, .tooltip.bottom:after {
-  top: 75%;
-}
-
-.tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after {
-  opacity: 1;
-  clip: auto;
-  -webkit-clip-path: inset(0%);
-  clip-path: inset(0%);
-}
-
-.tooltip:before {
-  content: '';
-  background: transparent;
-  border: 0.5rem solid transparent;
-  left: calc(50% - 0.5rem);
-}
-
-.tooltip:not(.bottom):before {
-  border-top-color: #212121;
-}
-
-.tooltip.bottom:before {
-  border-bottom-color: #212121;
-}
-
-.tooltip:after {
-  content: attr(aria-label);
-  color: #fafafa;
-  background: #212121;
-  border-radius: 0.125rem;
-  padding: 0.5rem;
-  white-space: nowrap;
-  transform: translateX(-50%);
-}
-
-.tooltip:not(.bottom):after {
-  margin-bottom: 1rem;
-}
-
-.tooltip.bottom:after {
-  margin-top: 1rem;
-}
diff --git a/inst/rmarkdown/lua/footnote-tooltip.lua b/inst/rmarkdown/lua/footnote-tooltip.lua
new file mode 100644
index 0000000..7988220
--- /dev/null
+++ b/inst/rmarkdown/lua/footnote-tooltip.lua
@@ -0,0 +1,4 @@
+function Note(note)
+  return pandoc.Span(note, {title = pandoc.utils.stringify(note.content)})
+end
+
diff --git a/inst/rmarkdown/lua/tooltip.lua b/inst/rmarkdown/lua/tooltip.lua
index ef1aba2..7139d87 100644
--- a/inst/rmarkdown/lua/tooltip.lua
+++ b/inst/rmarkdown/lua/tooltip.lua
@@ -1,14 +1,17 @@
---wip: remove elem.attr.attributes.tooltip
-
 function Span(elem)
   local tooltip = elem.attributes and elem.attributes.tooltip
   if tooltip then
-    return {
-      pandoc.RawInline(
-        "html", '<span class=tooltip aria-label="' .. tooltip .. '">'
-      ),
-      elem,
-      pandoc.RawInline("html", "</span>")
-    }
+    local tooltip_str = pandoc.utils.stringify(tooltip)
+    local attributes = {}
+    attributes["aria-label"] = tooltip_str
+    attributes["title"] = tooltip_str
+    for k,v in pairs(elem.attributes) do
+      if k ~= "tooltip" then
+        attributes[k] = v
+      end
+    end
+    elem.attributes = attributes
+    return elem
   end
 end
+
diff --git a/man/mini_document.Rd b/man/mini_document.Rd
index 11cfdf3..d9f6440 100644
--- a/man/mini_document.Rd
+++ b/man/mini_document.Rd
@@ -13,6 +13,7 @@ mini_document(
   section_divs = TRUE,
   code_folding = c("none", "show", "hide"),
   results_folding = c("none", "show", "hide"),
+  footnote_tooltip = FALSE,
   tabset = FALSE,
   code_download = FALSE,
   self_contained = TRUE,
@@ -30,7 +31,8 @@ mini_document(
 (default: \code{"sakura"}) and its theme (default: \code{"default"}).
 Note that \code{theme = "default"} is a special keyword which selects a theme
 defined as default internally. See \code{frameworks} for available light weight
-CSS frameworks and their themes.}
+CSS frameworks and their themes. If you want to scratch styles by yourself,
+use \code{framework = "none"}.}
 
 \item{toc}{\code{TRUE} to include a table of contents in the output}
 
@@ -40,8 +42,8 @@ document content.}
 \item{toc_highlight}{This is an experimental feature. \code{TRUE} highlights the
 table of contents according to the browser's viewport.}
 
-\item{section_divs}{Wrap sections in <div> tags, and attach identifiers to the
-enclosing <div> rather than the header itself.}
+\item{section_divs}{Wrap sections in \code{<div>} tags, and attach identifiers to the
+enclosing \code{<div>} rather than the header itself.}
 
 \item{code_folding}{Setup code folding by a string or a named list.
 A choice for the string are \code{"none"} to disable,
@@ -93,6 +95,8 @@ document (typically created using the \code{\link[rmarkdown]{includes}} function
 \item{pandoc_args}{Additional command line options to pass to pandoc}
 
 \item{...}{Arguments passed to \code{rmarkdown::html_document}}
+
+\item{footenote_tooltip}{\code{TRUE} let footnotes to be also shown as tooltips.}
 }
 \description{
 The output format is HTML5 in general. If \code{framework = "bootstrap"} is given,