Fix the duplicated row bug in LaTeX table. Fix a bug introduced in #73. Change back to div for cell_spec
diff --git a/DESCRIPTION b/DESCRIPTION
index c2424f0..4886c5f 100644
--- a/DESCRIPTION
+++ b/DESCRIPTION
@@ -34,7 +34,8 @@
     rmarkdown (>= 1.6.0),
     readr,
     scales, 
-    viridisLite
+    viridisLite,
+    stats
 Suggests:
     testthat,
     magick,
diff --git a/NAMESPACE b/NAMESPACE
index 50553a4..0b5eea7 100644
--- a/NAMESPACE
+++ b/NAMESPACE
@@ -12,6 +12,7 @@
 export(kable_as_image)
 export(kable_styling)
 export(landscape)
+export(latex_pkg_list)
 export(magic_mirror)
 export(rmd_format)
 export(row_spec)
diff --git a/R/add_indent.R b/R/add_indent.R
index 8932eaa..a0cb37f 100644
--- a/R/add_indent.R
+++ b/R/add_indent.R
@@ -29,13 +29,19 @@
 # Add indentation for LaTeX
 add_indent_latex <- function(kable_input, positions) {
   table_info <- magic_mirror(kable_input)
+  out <- enc2utf8(as.character(kable_input))
+
+  if (table_info$duplicated_rows) {
+    dup_fx_out <- fix_duplicated_rows_latex(out, table_info)
+    out <- dup_fx_out[[1]]
+    table_info <- dup_fx_out[[2]]
+  }
 
   if (max(positions) > table_info$nrow - 1) {
     stop("There aren't that many rows in the table. Check positions in ",
          "add_indent_latex.")
   }
 
-  out <- enc2utf8(kable_input)
   for (i in positions) {
     rowtext <- table_info$contents[i + 1]
     out <- sub(rowtext, latex_indent_unit(rowtext), out, perl = TRUE)
diff --git a/R/cell_spec.R b/R/cell_spec.R
index 7b7f00a..0f55d31 100644
--- a/R/cell_spec.R
+++ b/R/cell_spec.R
@@ -21,8 +21,8 @@
 #' @param font_size Only if you want to specify font size locally in HTML.
 #' This feature is not available in LaTeX
 #' @param angle 0-360, degree that the text will rotate. Can be a vector.
-#' @param hover_message A vector of strings to be displayed as hover message.
-#' Of course, this feature is nly available in HTML.
+#' @param tooltip A vector of strings to be displayed as tooltip.
+#' Of course, this feature is only available in HTML.
 #' @param background_as_tile T/F value indicating if you want to have round
 #' cornered tile as background.
 #'
@@ -31,7 +31,7 @@
                       bold = F, italic = F, monospace = F,
                       color = NULL, background = NULL,
                       align = NULL, font_size = NULL, angle = NULL,
-                      hover_message = NULL, background_as_tile = TRUE) {
+                      tooltip = NULL, background_as_tile = TRUE) {
 
   if (missing(format) || is.null(format)) format = getOption('knitr.table.format')
   if (is.null(format)) {
@@ -42,7 +42,7 @@
   if (tolower(format) == "html") {
     return(cell_spec_html(x, bold, italic, monospace,
                           color, background, align, font_size, angle,
-                          hover_message, background_as_tile))
+                          tooltip, background_as_tile))
   }
   if (tolower(format) == "latex") {
     return(cell_spec_latex(x, bold, italic, monospace,
@@ -52,7 +52,7 @@
 
 cell_spec_html <- function(x, bold, italic, monospace,
                            color, background, align, font_size, angle,
-                           hover_message, background_as_tile) {
+                           tooltip, background_as_tile) {
   cell_style <- NULL
   if (bold) cell_style <- paste(cell_style,"font-weight: bold;")
   if (italic) cell_style <- paste(cell_style, "font-style: italic;")
@@ -84,12 +84,12 @@
                          "deg);")
   }
 
-  if (!is.null(hover_message)) {
-    hover_message <- gsub("\n", "&#013;", hover_message)
-    hover_message <- paste0("data-toggle='tooltip' title='", hover_message, "'")
+  if (!is.null(tooltip)) {
+    tooltip <- gsub("\n", "&#013;", tooltip)
+    tooltip <- paste0("data-toggle='tooltip' title='", tooltip, "'")
   }
   out <- paste0(
-    '<span style="', cell_style, '"', hover_message, '>', x, '</span>'
+    '<div style="', cell_style, '"', tooltip, '>', x, '</div>'
   )
   return(out)
 }
diff --git a/R/collapse_rows.R b/R/collapse_rows.R
index 8ba1250..af2c0a5 100644
--- a/R/collapse_rows.R
+++ b/R/collapse_rows.R
@@ -86,10 +86,18 @@
 
 collapse_rows_latex <- function(kable_input, columns) {
   table_info <- magic_mirror(kable_input)
+  out <- enc2utf8(as.character(kable_input))
+
+  if (table_info$duplicated_rows) {
+    dup_fx_out <- fix_duplicated_rows_latex(out, table_info)
+    out <- dup_fx_out[[1]]
+    table_info <- dup_fx_out[[2]]
+  }
+
   if (is.null(columns)) {
     columns <- seq(1, table_info$ncol)
   }
-  out <- enc2utf8(as.character(kable_input))
+
   contents <- table_info$contents
   kable_dt <- kable_dt_latex(contents)
   collapse_matrix <- collapse_row_matrix(kable_dt, columns, html = F)
diff --git a/R/group_rows.R b/R/group_rows.R
index 0d31bbd..7009995 100644
--- a/R/group_rows.R
+++ b/R/group_rows.R
@@ -117,6 +117,12 @@
   table_info <- magic_mirror(kable_input)
   out <- enc2utf8(as.character(kable_input))
 
+  if (table_info$duplicated_rows) {
+    dup_fx_out <- fix_duplicated_rows_latex(out, table_info)
+    out <- dup_fx_out[[1]]
+    table_info <- dup_fx_out[[2]]
+  }
+
   if (escape) {
     group_label <- escape_latex(group_label)
     group_label <- gsub("\\\\", "\\\\\\\\", group_label)
diff --git a/R/kableExtra-package.R b/R/kableExtra-package.R
index 672eb8d..0e9df80 100644
--- a/R/kableExtra-package.R
+++ b/R/kableExtra-package.R
@@ -68,6 +68,7 @@
 #' @importFrom readr read_lines read_file
 #' @importFrom scales rescale
 #' @importFrom viridisLite viridis
+#' @importFrom stats ave
 #' @name kableExtra-package
 #' @aliases kableExtra
 #' @docType package
diff --git a/R/kable_styling.R b/R/kable_styling.R
index 417c8dd..7555d3e 100644
--- a/R/kable_styling.R
+++ b/R/kable_styling.R
@@ -382,6 +382,7 @@
 
 styling_latex_position <- function(x, table_info, position, latex_options) {
   hold_position <- intersect(c("hold_position", "HOLD_position"), latex_options)
+  if (length(hold_position) == 0) hold_position <- ""
   switch(
     position,
     center = styling_latex_position_center(x, table_info, hold_position),
diff --git a/R/magic_mirror.R b/R/magic_mirror.R
index 66b3fde..e6503b4 100644
--- a/R/magic_mirror.R
+++ b/R/magic_mirror.R
@@ -88,6 +88,7 @@
   if (kable_info$tabular == "longtable" & !is.na(kable_info$caption)) {
     kable_info$contents <- kable_info$contents[-1]
   }
+  kable_info$duplicated_rows <- (sum(duplicated(kable_info$contents)) != 0)
   # Column names
   kable_info$colnames <- str_split(kable_info$contents[1], " \\& ")[[1]]
   # Row names
diff --git a/R/row_spec.R b/R/row_spec.R
index ec8a959..877ab81 100644
--- a/R/row_spec.R
+++ b/R/row_spec.R
@@ -142,6 +142,13 @@
                            color, background, align, angle) {
   table_info <- magic_mirror(kable_input)
   out <- enc2utf8(as.character(kable_input))
+
+  if (table_info$duplicated_rows) {
+    dup_fx_out <- fix_duplicated_rows_latex(out, table_info)
+    out <- dup_fx_out[[1]]
+    table_info <- dup_fx_out[[2]]
+  }
+
   row <- row + 1
   for (i in row) {
     target_row <- table_info$contents[i]
diff --git a/R/sparkline.R b/R/sparkline.R
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/R/sparkline.R
diff --git a/R/util.R b/R/util.R
index dc71524..f63e0c0 100644
--- a/R/util.R
+++ b/R/util.R
@@ -111,3 +111,26 @@
     "\\usepackage{threeparttable}"
   ))
 }
+
+# Fix duplicated rows in LaTeX tables
+fix_duplicated_rows_latex <- function(kable_input, table_info) {
+  # Since sub/string_replace start from beginning, we count unique value from
+  # behind.
+  rev_contents <- rev(table_info$contents)
+  dup_index <- rev(ave(seq_along(rev_contents), rev_contents,
+                       FUN = seq_along))
+  for (i in which(dup_index != 1)) {
+    dup_row <- table_info$contents[i]
+    empty_times <- dup_index[i] - 1
+    new_row <- str_replace(
+      dup_row, "&",
+      paste(c("&", rep("\\\\\\\\empty", empty_times)), collapse = ""))
+    kable_input <- str_replace(kable_input, dup_row, new_row)
+    table_info$contents[i] <- new_row
+  }
+  table_info$duplicated_rows <- FALSE
+  return(list(kable_input, table_info))
+}
+
+
+
diff --git a/docs/use_kableExtra_with_formattable.Rmd b/docs/use_kableExtra_with_formattable.Rmd
index 72650cd..1d71652 100644
--- a/docs/use_kableExtra_with_formattable.Rmd
+++ b/docs/use_kableExtra_with_formattable.Rmd
@@ -51,3 +51,4 @@
   kable("html", escape = F, align = "c") %>%
   kable_styling("condensed", full_width = F)
 ```
+
diff --git a/docs/use_kableExtra_with_formattable.html b/docs/use_kableExtra_with_formattable.html
index add363a..70b29d3 100644
--- a/docs/use_kableExtra_with_formattable.html
+++ b/docs/use_kableExtra_with_formattable.html
@@ -11,7 +11,7 @@
 
 <meta name="author" content="Hao Zhu" />
 
-<meta name="date" content="2017-10-14" />
+<meta name="date" content="2017-10-16" />
 
 <title>Use kableExtra with formattable</title>
 
@@ -119,7 +119,7 @@
 
 <h1 class="title toc-ignore">Use kableExtra with formattable</h1>
 <h4 class="author"><em>Hao Zhu</em></h4>
-<h4 class="date"><em>2017-10-14</em></h4>
+<h4 class="date"><em>2017-10-16</em></h4>
 
 </div>
 
@@ -188,10 +188,14 @@
 <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffcc6f">21.0</span>
 </td>
 <td style="text-align:left;">
-<span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg);">6</span>
+<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg);">
+6
+</div>
 </td>
 <td style="text-align:left;">
-<span style=" font-style: italic;color: green;">160</span>
+<div style=" font-style: italic;color: green;">
+160
+</div>
 </td>
 <td style="text-align:left;width: 3cm; display: inline-block; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
@@ -205,10 +209,14 @@
 <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffcc6f">21.0</span>
 </td>
 <td style="text-align:left;">
-<span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg);">6</span>
+<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg);">
+6
+</div>
 </td>
 <td style="text-align:left;">
-<span style=" font-style: italic;color: green;">160</span>
+<div style=" font-style: italic;color: green;">
+160
+</div>
 </td>
 <td style="text-align:left;width: 3cm; display: inline-block; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
@@ -222,10 +230,14 @@
 <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffa500">22.8</span>
 </td>
 <td style="text-align:left;">
-<span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);">4</span>
+<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);">
+4
+</div>
 </td>
 <td style="text-align:left;">
-<span style=" font-style: italic;color: green;">108</span>
+<div style=" font-style: italic;color: green;">
+108
+</div>
 </td>
 <td style="text-align:left;width: 3cm; display: inline-block; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 53.14%">93</span>
@@ -239,10 +251,14 @@
 <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffc357">21.4</span>
 </td>
 <td style="text-align:left;">
-<span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -ms-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg);">6</span>
+<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -ms-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg);">
+6
+</div>
 </td>
 <td style="text-align:left;">
-<span style=" font-weight: bold;color: red;">258</span>
+<div style=" font-weight: bold;color: red;">
+258
+</div>
 </td>
 <td style="text-align:left;width: 3cm; display: inline-block; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
@@ -256,10 +272,14 @@
 <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffffff">18.7</span>
 </td>
 <td style="text-align:left;">
-<span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -ms-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg);">8</span>
+<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -ms-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg);">
+8
+</div>
 </td>
 <td style="text-align:left;">
-<span style=" font-weight: bold;color: red;">360</span>
+<div style=" font-weight: bold;color: red;">
+360
+</div>
 </td>
 <td style="text-align:left;width: 3cm; display: inline-block; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 100.00%">175</span>
@@ -301,16 +321,24 @@
 <tbody>
 <tr>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(66, 190, 113, 1);">5.1</span>
+<div style=" font-weight: bold;color: rgba(66, 190, 113, 1);">
+5.1
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(34, 168, 132, 1);">3.5</span>
+<div style=" font-weight: bold;color: rgba(34, 168, 132, 1);">
+3.5
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
+<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);">
+1.4
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);">
+0.2
+</div>
 </td>
 <td style="text-align:center;">
 setosa
@@ -318,16 +346,24 @@
 </tr>
 <tr>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">4.9</span>
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);">
+4.9
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(72, 37, 118, 1);">3</span>
+<div style=" font-weight: bold;color: rgba(72, 37, 118, 1);">
+3
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
+<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);">
+1.4
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);">
+0.2
+</div>
 </td>
 <td style="text-align:center;">
 setosa
@@ -335,16 +371,24 @@
 </tr>
 <tr>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(53, 95, 141, 1);">4.7</span>
+<div style=" font-weight: bold;color: rgba(53, 95, 141, 1);">
+4.7
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(52, 96, 141, 1);">3.2</span>
+<div style=" font-weight: bold;color: rgba(52, 96, 141, 1);">
+3.2
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);">1.3</span>
+<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);">
+1.3
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);">
+0.2
+</div>
 </td>
 <td style="text-align:center;">
 setosa
@@ -352,16 +396,24 @@
 </tr>
 <tr>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);">4.6</span>
+<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);">
+4.6
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);">3.1</span>
+<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);">
+3.1
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">1.5</span>
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);">
+1.5
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);">
+0.2
+</div>
 </td>
 <td style="text-align:center;">
 setosa
@@ -369,16 +421,24 @@
 </tr>
 <tr>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(34, 168, 132, 1);">5</span>
+<div style=" font-weight: bold;color: rgba(34, 168, 132, 1);">
+5
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(68, 191, 112, 1);">3.6</span>
+<div style=" font-weight: bold;color: rgba(68, 191, 112, 1);">
+3.6
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
+<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);">
+1.4
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);">
+0.2
+</div>
 </td>
 <td style="text-align:center;">
 setosa
@@ -386,16 +446,24 @@
 </tr>
 <tr>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);">5.4</span>
+<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);">
+5.4
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);">3.9</span>
+<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);">
+3.9
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);">1.7</span>
+<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);">
+1.7
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);">0.4</span>
+<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);">
+0.4
+</div>
 </td>
 <td style="text-align:center;">
 setosa
@@ -403,16 +471,24 @@
 </tr>
 <tr>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);">4.6</span>
+<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);">
+4.6
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">3.4</span>
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);">
+3.4
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
+<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);">
+1.4
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(53, 183, 121, 1);">0.3</span>
+<div style=" font-weight: bold;color: rgba(53, 183, 121, 1);">
+0.3
+</div>
 </td>
 <td style="text-align:center;">
 setosa
@@ -420,16 +496,24 @@
 </tr>
 <tr>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(34, 168, 132, 1);">5</span>
+<div style=" font-weight: bold;color: rgba(34, 168, 132, 1);">
+5
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">3.4</span>
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);">
+3.4
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">1.5</span>
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);">
+1.5
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);">
+0.2
+</div>
 </td>
 <td style="text-align:center;">
 setosa
@@ -437,16 +521,24 @@
 </tr>
 <tr>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);">4.4</span>
+<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);">
+4.4
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);">2.9</span>
+<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);">
+2.9
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
+<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);">
+1.4
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);">
+0.2
+</div>
 </td>
 <td style="text-align:center;">
 setosa
@@ -454,16 +546,24 @@
 </tr>
 <tr>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">4.9</span>
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);">
+4.9
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);">3.1</span>
+<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);">
+3.1
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">1.5</span>
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);">
+1.5
+</div>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);">0.1</span>
+<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);">
+0.1
+</div>
 </td>
 <td style="text-align:center;">
 setosa
@@ -471,6 +571,183 @@
 </tr>
 </tbody>
 </table>
+<pre class="r"><code>mtcars %&gt;%
+  tidyr::gather(var, value) %&gt;%
+  group_by(var) %&gt;%
+  summarise(
+    mean = mean(value),
+    sd = sd(value),
+    sparkline = list(sparkline::sparkline(value))
+  ) %&gt;%
+  ungroup() %&gt;%
+  mutate(
+    stat = paste0(mean, &quot; (&quot;, sd, &quot;)&quot;),
+    stat = cell_spec(stat, color = spec_color(mean))
+  ) %&gt;%
+  select(var, stat, sparkline) %&gt;%
+  kable(&quot;html&quot;, escape = F) %&gt;%
+  kable_styling(full_width = F)</code></pre>
+<pre><code>## Setting cell_spec format as html</code></pre>
+<table class="table" style="width: auto !important; margin-left: auto; margin-right: auto;">
+<thead>
+<tr>
+<th style="text-align:left;">
+var
+</th>
+<th style="text-align:left;">
+stat
+</th>
+<th style="text-align:left;">
+sparkline
+</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:left;">
+am
+</td>
+<td style="text-align:left;">
+<div style="color: rgba(68, 1, 84, 1);">
+0.40625 (0.498990917235846)
+</div>
+</td>
+<td style="text-align:left;">
+1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 20, 60, 60, 20, 60, 20, 0, 0, 0, 1
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+carb
+</td>
+<td style="text-align:left;">
+<div style="color: rgba(69, 5, 89, 1);">
+2.8125 (1.61519997763185)
+</div>
+</td>
+<td style="text-align:left;">
+4, 4, 1, 1, 2, 1, 4, 2, 2, 4, 4, 3, 3, 3, 4, 4, 4, 1, 2, 1, 1, 2, 2, 4, 2, 1, 2, 2, 4, 6, 8, 2, 20, 60, 60, 20, 60, 20, 0, 0, 0, 1
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+cyl
+</td>
+<td style="text-align:left;">
+<div style="color: rgba(70, 10, 93, 1);">
+6.1875 (1.78592164694654)
+</div>
+</td>
+<td style="text-align:left;">
+6, 6, 4, 6, 8, 6, 8, 4, 4, 6, 6, 8, 8, 8, 8, 8, 8, 4, 4, 4, 4, 8, 8, 8, 8, 4, 4, 4, 8, 6, 8, 4, 20, 60, 60, 20, 60, 20, 0, 0, 0, 1
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+disp
+</td>
+<td style="text-align:left;">
+<div style="color: rgba(253, 231, 37, 1);">
+230.721875 (123.938693831382)
+</div>
+</td>
+<td style="text-align:left;">
+160.0, 160.0, 108.0, 258.0, 360.0, 225.0, 360.0, 146.7, 140.8, 167.6, 167.6, 275.8, 275.8, 275.8, 472.0, 460.0, 440.0, 78.7, 75.7, 71.1, 120.1, 318.0, 304.0, 350.0, 400.0, 79.0, 120.3, 95.1, 351.0, 145.0, 301.0, 121.0, 20.0, 60.0, 60.0, 20.0, 60.0, 20.0, 0.0, 0.0, 0.0, 1.0
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+drat
+</td>
+<td style="text-align:left;">
+<div style="color: rgba(70, 7, 90, 1);">
+3.5965625 (0.534678736070971)
+</div>
+</td>
+<td style="text-align:left;">
+3.90, 3.90, 3.85, 3.08, 3.15, 2.76, 3.21, 3.69, 3.92, 3.92, 3.92, 3.07, 3.07, 3.07, 2.93, 3.00, 3.23, 4.08, 4.93, 4.22, 3.70, 2.76, 3.15, 3.73, 3.08, 4.08, 4.43, 3.77, 4.22, 3.62, 3.54, 4.11, 20.00, 60.00, 60.00, 20.00, 60.00, 20.00, 0.00, 0.00, 0.00, 1.00
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+gear
+</td>
+<td style="text-align:left;">
+<div style="color: rgba(70, 7, 90, 1);">
+3.6875 (0.737804065256947)
+</div>
+</td>
+<td style="text-align:left;">
+4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 4, 3, 3, 3, 3, 3, 3, 4, 4, 4, 3, 3, 3, 3, 3, 4, 5, 5, 5, 5, 5, 4, 20, 60, 60, 20, 60, 20, 0, 0, 0, 1
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+hp
+</td>
+<td style="text-align:left;">
+<div style="color: rgba(42, 176, 127, 1);">
+146.6875 (68.5628684893206)
+</div>
+</td>
+<td style="text-align:left;">
+110, 110, 93, 110, 175, 105, 245, 62, 95, 123, 123, 180, 180, 180, 205, 215, 230, 66, 52, 65, 97, 150, 150, 245, 175, 66, 91, 113, 264, 175, 335, 109, 20, 60, 60, 20, 60, 20, 0, 0, 0, 1
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+mpg
+</td>
+<td style="text-align:left;">
+<div style="color: rgba(72, 32, 113, 1);">
+20.090625 (6.0269480520891)
+</div>
+</td>
+<td style="text-align:left;">
+21.0, 21.0, 22.8, 21.4, 18.7, 18.1, 14.3, 24.4, 22.8, 19.2, 17.8, 16.4, 17.3, 15.2, 10.4, 10.4, 14.7, 32.4, 30.4, 33.9, 21.5, 15.5, 15.2, 13.3, 19.2, 27.3, 26.0, 30.4, 15.8, 19.7, 15.0, 21.4, 20.0, 60.0, 60.0, 20.0, 60.0, 20.0, 0.0, 0.0, 0.0, 1.0
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+qsec
+</td>
+<td style="text-align:left;">
+<div style="color: rgba(72, 28, 110, 1);">
+17.84875 (1.78694323609684)
+</div>
+</td>
+<td style="text-align:left;">
+16.46, 17.02, 18.61, 19.44, 17.02, 20.22, 15.84, 20.00, 22.90, 18.30, 18.90, 17.40, 17.60, 18.00, 17.98, 17.82, 17.42, 19.47, 18.52, 19.90, 20.01, 16.87, 17.30, 15.41, 17.05, 18.90, 16.70, 16.90, 14.50, 15.50, 14.60, 18.60, 20.00, 60.00, 60.00, 20.00, 60.00, 20.00, 0.00, 0.00, 0.00, 1.00
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+vs
+</td>
+<td style="text-align:left;">
+<div style="color: rgba(68, 1, 84, 1);">
+0.4375 (0.504016128774185)
+</div>
+</td>
+<td style="text-align:left;">
+0, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 20, 60, 60, 20, 60, 20, 0, 0, 0, 1
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+wt
+</td>
+<td style="text-align:left;">
+<div style="color: rgba(69, 5, 89, 1);">
+3.21725 (0.978457442989697)
+</div>
+</td>
+<td style="text-align:left;">
+2.620, 2.875, 2.320, 3.215, 3.440, 3.460, 3.570, 3.190, 3.150, 3.440, 3.440, 4.070, 3.730, 3.780, 5.250, 5.424, 5.345, 2.200, 1.615, 1.835, 2.465, 3.520, 3.435, 3.840, 3.845, 1.935, 2.140, 1.513, 3.170, 2.770, 3.570, 2.780, 20.000, 60.000, 60.000, 20.000, 60.000, 20.000, 0.000, 0.000, 0.000, 1.000
+</td>
+</tr>
+</tbody>
+</table>
 
 
 
diff --git a/man/cell_spec.Rd b/man/cell_spec.Rd
index 291a18a..edadea7 100644
--- a/man/cell_spec.Rd
+++ b/man/cell_spec.Rd
@@ -6,7 +6,7 @@
 \usage{
 cell_spec(x, format, bold = F, italic = F, monospace = F, color = NULL,
   background = NULL, align = NULL, font_size = NULL, angle = NULL,
-  hover_message = NULL, background_as_tile = TRUE)
+  tooltip = NULL, background_as_tile = TRUE)
 }
 \arguments{
 \item{x}{Things to be formated. It could be a vector of numbers or strings.}
@@ -38,8 +38,8 @@
 
 \item{angle}{0-360, degree that the text will rotate. Can be a vector.}
 
-\item{hover_message}{A vector of strings to be displayed as hover message.
-Of course, this feature is nly available in HTML.}
+\item{tooltip}{A vector of strings to be displayed as tooltip.
+Of course, this feature is only available in HTML.}
 
 \item{background_as_tile}{T/F value indicating if you want to have round
 cornered tile as background.}
diff --git a/tests/visual_tests/add_header_left.Rmd b/tests/visual_tests/add_header_left.Rmd
deleted file mode 100644
index 3083fa3..0000000
--- a/tests/visual_tests/add_header_left.Rmd
+++ /dev/null
@@ -1,19 +0,0 @@
----
-title: "add_header_left"
-output: 
-  pdf_document:
-    keep_tex: true
----
-
-```{r}
-library(knitr)
-library(kableExtra)
-
-mtcars[1:10, 1:6] %>%
-  kable("latex", booktabs= T) %>%
-  kable_styling(latex_options = "striped") %>%
-  add_header_above(c(" ", "a%" = 3, "b" = 3)) %>%
-  add_header_left(c("a%knjnuulkjlkj" = 3, "b" = 7), "new", align = "l") %>%
-  add_header_left(c("aadjfoi adlfsjs adsa" = 4, "b" = 6), "new2",  width = "1.5cm") %>%
-  add_header_left(c("a" = 5, "b" = 5), "xx", width = "1cm", align = "r")
-```
diff --git a/tests/visual_tests/add_header_left_html.Rmd b/tests/visual_tests/add_header_left_html.Rmd
deleted file mode 100644
index 09e739f..0000000
--- a/tests/visual_tests/add_header_left_html.Rmd
+++ /dev/null
@@ -1,17 +0,0 @@
----
-title: "add_header_left"
-output: html_document
----
-
-```{r}
-library(knitr)
-library(kableExtra)
-
-mtcars[1:10, 1:6] %>%
-  kable("html") %>%
-  kable_styling() %>%
-  add_header_above(c(" ", "a" = 3, "b" = 3)) %>%
-  add_header_left(c("a" = 2, "b" = 3), width = "3cm", bold = T) %>%
-  add_header_left(c("a%" = 3, "b" = 7)) %>%
-  column_spec(1, bold = T, width = "1cm")
-```
diff --git a/tests/visual_tests/cell_spec_html.Rmd b/tests/visual_tests/cell_spec_html.Rmd
index fb645ad..e56a260 100644
--- a/tests/visual_tests/cell_spec_html.Rmd
+++ b/tests/visual_tests/cell_spec_html.Rmd
@@ -5,6 +5,14 @@
 output: html_document
 ---
 
+<script>
+  $( function() {
+    $( document ).tooltip();
+  } );
+</script>
+
+
+<div><div class = "tooltip">sss</div>ssa</div>
 ```{r, include=F}
 library(knitr)
 library(kableExtra)
@@ -17,7 +25,7 @@
     mpg = cell_spec(mpg, "html", color = "white", background = spec_color(mpg)),
     disp = cell_spec(disp, "html", color = spec_color(disp, option = "B"), 
                      bold = T, font_size = spec_font_size(disp)),
-    hp = cell_spec(hp, "html", hover_message = paste0("cyl:\n", cyl))
+    hp = cell_spec(hp, "html", tooltip = paste0("cyl:\n", cyl))
   ) %>%
   kable("html", escape = F) %>%
   kable_styling("condensed", full_width = F)
@@ -29,7 +37,7 @@
     cell_spec(x, "html", 
               color = spec_color(x, option = "A"), 
               font_size = spec_font_size(x),
-              bold = T)
+              bold = T, tooltip = "1")
     }) %>%
   kable("html", escape = F, booktabs = T, linesep = "", align = "c")%>%
   row_spec(0, angle = 270, align = "right") %>%
diff --git a/tests/visual_tests/tooltip.Rmd b/tests/visual_tests/tooltip.Rmd
new file mode 100644
index 0000000..55f81b3
--- /dev/null
+++ b/tests/visual_tests/tooltip.Rmd
@@ -0,0 +1,35 @@
+---
+title: "Untitled"
+author: "Hao"
+date: "10/15/2017"
+output: html_document
+---
+
+```{r, include=FALSE}
+library(knitr)
+library(kableExtra)
+library(tidyverse)
+```
+
+```{r}
+htmlFun = function(content) {
+  x = htmltools::tags$div(content, class = 'error')
+  # you could also do this if you don't care about escaping HTML entities in 'content':
+  # x = htmltools::HTML(paste('<div class="error">', content, '</div>'))
+  d = htmltools::htmlDependency(
+    'knitr-css', '1.2.3', src = system.file('misc', package = 'knitr'),
+    stylesheet = 'knitr.css'
+  )
+  x = htmltools::attachDependencies(x, d)
+  x
+}
+
+htmlFun('Hello World!')
+```
+
+```{r}
+mtcars[1:5, 1:2] %>%
+  mutate(mpg = cell_spec(mpg, tooltip = cyl)) %>%
+  kable("html", escape = F) %>%
+  htmltools::HTML() 
+```
diff --git a/vignettes/awesome_table_in_pdf.Rmd b/vignettes/awesome_table_in_pdf.Rmd
index 2d37e1b..18cb068 100644
--- a/vignettes/awesome_table_in_pdf.Rmd
+++ b/vignettes/awesome_table_in_pdf.Rmd
@@ -85,7 +85,7 @@
 ## Plain LaTeX
 Plain LaTeX table looks relatively ugly in 2017.
 ```{r}
-kable(dt)
+kable(dt, format = "latex")
 ```
 
 ## LaTeX table with booktabs