diff --git a/docs/awesome_table_in_html.Rmd b/docs/awesome_table_in_html.Rmd
index fa6c222..66ad67e 100644
--- a/docs/awesome_table_in_html.Rmd
+++ b/docs/awesome_table_in_html.Rmd
@@ -143,34 +143,134 @@
   row_spec(3:5, bold = T, color = "white", background = "#D7261E")
 ```
 
-# Cell Specification
-`cell_spec` is different from the rest. You should use it before you pipe the table into the `kable` function. It is designed in such a way that you can easily use it inside a `dplyr::mutate()` together with conditional logic like `ifelse`. Since everything happens before `kable`, you have to tell this function which format you want to go to, `html` or `latex`. To reduce unnecessary finger typing, I linked the `format` argument here with `knitr::kable`'s global format option `knitr.table.format`. If you have defined this option to be `html` at the beginning of your document (as suggested earlier), it is not necessary for you to define format again for every `cell_spec`. 
 
-```{r, message=FALSE}
-library(dplyr)
-mtcars[1:5, 1:3] %>%
-  mutate(
-    car = row.names(.),
-    mpg = ifelse(mpg > 20, 
-                 cell_spec(mpg, "html", font_size = 18), mpg),
-    cyl = cell_spec(cyl, "html", angle = (1:5)*60, hover_message = mpg,
-                    background = "red", color = "white", align = "center"),
-    disp = ifelse(disp > 200,
-                  cell_spec(disp, "html", color = "red", bold = T),
-                  cell_spec(disp, "html", color = "green", italic = T)),
-    fancy = c(12, 14, 16, 18, 20),
-    fancy = cell_spec(fancy, "html", font_size = fancy, 
-                      color = viridisLite::inferno(length(fancy), end = 0.8)),
-    car = cell_spec(car, "html", bold = T,
-                    color = viridisLite::inferno(length(fancy), end = 0.8))
-  ) %>%
-  select(car, everything()) %>%
-  kable("html", escape = F) %>%
-  kable_styling("hover", full_width = F) %>%
-  add_header_above(c(" ", "Hello" = 2, "World" = 2)) 
+
+## Header Rows
+One special case of `row_spec` is that you can specify the format of the header row via `row_spec(row = 0, ...)`. 
+```{r}
+kable(dt, format = "html") %>%
+  kable_styling("striped", full_width = F) %>%
+  row_spec(0, angle = -45)
 ```
 
-## 
+# Cell/Text Specification
+Function `cell_spec` is introduced in version 0.6.0 of `kableExtra`. Unlike `column_spec` and `row_spec`, **this function is designed to be used before the data.frame gets into the `kable` function**. Comparing with figuring out a list of 2 dimentional index for targeted cells, this design is way easier to learn and use and it fits perfectly well with `dplyr`'s `mutate` and `summarize` functions. With this design, there are two things to be noted:
+* Since `cell_spec` generates raw `HTML` or `LaTeX` code, make sure you remember to put `escape = FALSE` in `kable`. At the same time, you have to escape special symbols including `%` manually by yourself
+* `cell_spec` needs a way to know whether you want `html` or `latex`. You can specify it locally in function or globally via the `options(knitr.table.format = "latex")` method as suggested at the beginning. If you don't provide anything, this function will output as HTML by default. 
+
+Currently, `cell_spec` supports features including bold, italic, monospace, text color, background color, align, font size & rotation angle. More features may be added in the future. Please see function documentations as reference. 
+
+## Conditional logic
+It is very easy to use `cell_spec` with conditional logic. Here is an example.
+```{r, message=FALSE, warning=FALSE}
+library(dplyr)
+mtcars[1:10, 1:2] %>%
+  mutate(
+    car = row.names(.),
+    # You don't need format = "html" if you have ever defined options(knitr.table.format)
+    mpg = cell_spec(mpg, "html", color = ifelse(mpg > 20, "red", "blue")),
+    cyl = cell_spec(cyl, "html", color = "white", align = "c", angle = 45, 
+                    background = factor(cyl, c(4, 6, 8), 
+                                        c("#666666", "#999999", "#BBBBBB")))
+  ) %>%
+  select(car, mpg, cyl) %>%
+  kable("html", escape = F) %>%
+  kable_styling("striped", full_width = F)
+```
+
+## Visualize data with Viridis Color
+This package also comes with a few helper functions, including `spec_color`, `spec_font_size` & `spec_angle`. These functions can rescale continuous variables to certain scales. For example, function `spec_color` would map a continuous variable to any [viridis color palettes](https://cran.r-project.org/web/packages/viridis/vignettes/intro-to-viridis.html). It offers a very visually impactful representation in a tabular format. 
+
+```{r}
+iris[1:10, ] %>%
+  mutate_if(is.numeric, function(x) {
+    cell_spec(x, "html", bold = T, color = spec_color(x, end = 0.9),
+              font_size = spec_font_size(x))
+  }) %>%
+  mutate(Species = cell_spec(
+    Species, "html", color = "white", bold = T,
+    background = spec_color(1:10, end = 0.9, option = "A", direction = -1)
+  )) %>%
+  kable("html", escape = F, align = "c") %>%
+  kable_styling("striped", full_width = F)
+```
+
+In the example above, I'm using the `mutate` functions from `dplyr`. You don't have to use it. Base R solutions like `iris$Species <- cell_spec(iris$Species, color = "red")` also works. 
+
+## Text Specification
+If you check the results of `cell_spec`, you will find that this function does nothing more than wrapping the text with appropriate HTML/LaTeX formatting syntax. The result of this function is just a vector of character strings. As a result, when you are writing a `rmarkdown` document or write some text in shiny apps, if you need extra markups other than **bold** or *italic*, you may use this function to `r text_spec("color", color = "red")`, `r text_spec("change font size ", font_size = 16)` or `r text_spec("rotate", angle = 30)` your text. 
+
+An aliased function `text_spec` is also provided for a more literal writing experience. In HTML, there is no difference between these two functions. 
+
+```{r}
+sometext <- strsplit(paste0(
+  "You can even try do do some crazy things like this paragraph. ", 
+  "It seems to be a useless feature at this moment but who cares. ", 
+  "It is so fun to play with color that I can't stop. ;)"
+), " ")[[1]]
+text_formatted <- paste(
+  text_spec(sometext, "html", color = spec_color(1:length(sometext), end = 0.9),
+            font_size = spec_font_size(1:length(sometext), begin = 5, end = 20)),
+  collapse = " ")
+
+# To display the text, type `r text_formatted` outside of the chunk
+```
+`r text_formatted`
+
+## Tooltip
+It's very easy to add a tooltip to text via `cell_spec`. For example, `text_spec("tooltip", color = "red", tooltip = "Hello World")` will give you something like `r text_spec("Hover over me", color = "red", tooltip = "Hello World")` (you need to wait for a few seconds before your browser renders it). 
+
+Note that the original browser-based tooltip is slow. If you want to have a faster response, you may want to initialize bootstrap's tooltip by putting the following HTML code on the page. 
+```
+<script>
+$(document).ready(function(){
+    $('[data-toggle="tooltip"]').tooltip(); 
+});
+</script>
+```
+
+In a rmarkdown document, you can just drop it outside of any R chunks. Unfortunately however, for rmarkdown pages with a **floating TOC** (like this page), you can't use bootstrap tooltips because there is a conflict in namespace between Bootstrap and JQueryUI (tocify.js). As a result, I can't provide a live demo here. If you want to have a tooltip together with a floating TOC, you should use `popover` which has a very similar effect.
+
+
+
+## Popover Message
+The popover message looks very similar with tooltip but it can hold more contents. Unlike tooltip which can minimally work without you manually enable that module, you **have to** enable the `popover` module to get it work. The upper side is that there is no conflict between Bootstrap & JQueryUI this time, you can use it without any concern.
+
+```
+<script>
+$(document).ready(function(){
+    $('[data-toggle="popover"]').popover(); 
+});
+</script>
+```
+
+<script>
+$(document).ready(function(){
+    $('[data-toggle="popover"]').popover(); 
+});
+</script>
+
+```{r}
+popover_dt <- data.frame(
+  position = c("top", "bottom", "right", "left"),
+  stringsAsFactors = FALSE
+)
+popover_dt$`Hover over these items` <- cell_spec(
+  paste("Message on", popover_dt$position), # Cell texts
+  popover = spec_popover(
+    content = popover_dt$position,
+    title = NULL,                           # title will add a Title Panel on top
+    position = popover_dt$position
+  ))
+kable(popover_dt, "html", escape = FALSE) %>%
+  kable_styling("striped", full_width = FALSE)
+```
+
+## Links
+You can add links to text via `text_spec("Google", link = "https://google.com")`: `r text_spec("Google", link = "https://google.com")`. If you want your hover message to be more obvious, it might be a good idea to put a `#` in the `link` option.
+`text_spec("Hover on me", link = "#", popover = "Hello")`:
+`r text_spec("Hover on me", link = "#", popover = "Hello")`
+
 
 # Grouped Columns / Rows
 ## Add header rows to group columns
diff --git a/docs/awesome_table_in_html.html b/docs/awesome_table_in_html.html
index 98b43a6..34e2be4 100644
--- a/docs/awesome_table_in_html.html
+++ b/docs/awesome_table_in_html.html
@@ -11,7 +11,7 @@
 
 <meta name="author" content="Hao Zhu" />
 
-<meta name="date" content="2017-10-12" />
+<meta name="date" content="2017-10-23" />
 
 <title>Create Awesome HTML Table with knitr::kable and kableExtra</title>
 
@@ -217,16 +217,11 @@
 
 <h1 class="title toc-ignore">Create Awesome HTML Table with knitr::kable and kableExtra</h1>
 <h4 class="author"><em>Hao Zhu</em></h4>
-<h4 class="date"><em>2017-10-12</em></h4>
+<h4 class="date"><em>2017-10-23</em></h4>
 
 </div>
 
 
-<script>
-$(document).ready(function(){
-    $('[data-toggle="tooltip"]').tooltip(); 
-});
-</script>
 <blockquote>
 <p>Please see the package <a href="http://haozhu233.github.io/kableExtra/">documentation site</a> for how to use this package in LaTeX.</p>
 </blockquote>
@@ -1801,48 +1796,179 @@
 </tbody>
 </table>
 </div>
-</div>
-<div id="cell-specification" class="section level1">
-<h1>Cell Specification</h1>
-<p><code>cell_spec</code> is different from the rest. You should use it before you pipe the table into the <code>kable</code> function. It is designed in such a way that you can easily use it inside a <code>dplyr::mutate()</code> together with conditional logic like <code>ifelse</code>. Since everything happens before <code>kable</code>, you have to tell this function which format you want to go to, <code>html</code> or <code>latex</code>. To reduce unnecessary finger typing, I linked the <code>format</code> argument here with <code>knitr::kable</code>’s global format option <code>knitr.table.format</code>. If you have defined this option to be <code>html</code> at the beginning of your document (as suggested earlier), it is not necessary for you to define format again for every <code>cell_spec</code>.</p>
-<pre class="r"><code>library(dplyr)</code></pre>
-<pre><code>## Warning: package 'dplyr' was built under R version 3.4.2</code></pre>
-<pre class="r"><code>mtcars[1:5, 1:3] %&gt;%
-  mutate(
-    car = row.names(.),
-    mpg = ifelse(mpg &gt; 20, 
-                 cell_spec(mpg, &quot;html&quot;, font_size = 18), mpg),
-    cyl = cell_spec(cyl, &quot;html&quot;, angle = (1:5)*60, hover_message = mpg,
-                    background = &quot;red&quot;, color = &quot;white&quot;, align = &quot;center&quot;),
-    disp = ifelse(disp &gt; 200,
-                  cell_spec(disp, &quot;html&quot;, color = &quot;red&quot;, bold = T),
-                  cell_spec(disp, &quot;html&quot;, color = &quot;green&quot;, italic = T)),
-    fancy = c(12, 14, 16, 18, 20),
-    fancy = cell_spec(fancy, &quot;html&quot;, font_size = fancy, 
-                      color = viridisLite::inferno(length(fancy), end = 0.8)),
-    car = cell_spec(car, &quot;html&quot;, bold = T,
-                    color = viridisLite::inferno(length(fancy), end = 0.8))
-  ) %&gt;%
-  select(car, everything()) %&gt;%
-  kable(&quot;html&quot;, escape = F) %&gt;%
-  kable_styling(&quot;hover&quot;, full_width = F) %&gt;%
-  add_header_above(c(&quot; &quot;, &quot;Hello&quot; = 2, &quot;World&quot; = 2)) </code></pre>
-<table class="table table-hover" style="width: auto !important; margin-left: auto; margin-right: auto;">
+<div id="header-rows" class="section level2">
+<h2>Header Rows</h2>
+<p>One special case of <code>row_spec</code> is that you can specify the format of the header row via <code>row_spec(row = 0, ...)</code>.</p>
+<pre class="r"><code>kable(dt, format = &quot;html&quot;) %&gt;%
+  kable_styling(&quot;striped&quot;, full_width = F) %&gt;%
+  row_spec(0, angle = -45)</code></pre>
+<table class="table table-striped" style="width: auto !important; margin-left: auto; margin-right: auto;">
 <thead>
 <tr>
-<th style="border-bottom:hidden">
+<th style="text-align:left;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);">
 </th>
-<th style="text-align:center; border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;" colspan="2">
-<div style="border-bottom: 1px solid #ddd; padding-bottom: 5px;">
-Hello
-</div>
+<th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);">
+mpg
 </th>
-<th style="text-align:center; border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;" colspan="2">
-<div style="border-bottom: 1px solid #ddd; padding-bottom: 5px;">
-World
-</div>
+<th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);">
+cyl
+</th>
+<th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);">
+disp
+</th>
+<th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);">
+hp
+</th>
+<th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);">
+drat
+</th>
+<th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);">
+wt
 </th>
 </tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:left;">
+Mazda RX4
+</td>
+<td style="text-align:right;">
+21.0
+</td>
+<td style="text-align:right;">
+6
+</td>
+<td style="text-align:right;">
+160
+</td>
+<td style="text-align:right;">
+110
+</td>
+<td style="text-align:right;">
+3.90
+</td>
+<td style="text-align:right;">
+2.620
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Mazda RX4 Wag
+</td>
+<td style="text-align:right;">
+21.0
+</td>
+<td style="text-align:right;">
+6
+</td>
+<td style="text-align:right;">
+160
+</td>
+<td style="text-align:right;">
+110
+</td>
+<td style="text-align:right;">
+3.90
+</td>
+<td style="text-align:right;">
+2.875
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Datsun 710
+</td>
+<td style="text-align:right;">
+22.8
+</td>
+<td style="text-align:right;">
+4
+</td>
+<td style="text-align:right;">
+108
+</td>
+<td style="text-align:right;">
+93
+</td>
+<td style="text-align:right;">
+3.85
+</td>
+<td style="text-align:right;">
+2.320
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Hornet 4 Drive
+</td>
+<td style="text-align:right;">
+21.4
+</td>
+<td style="text-align:right;">
+6
+</td>
+<td style="text-align:right;">
+258
+</td>
+<td style="text-align:right;">
+110
+</td>
+<td style="text-align:right;">
+3.08
+</td>
+<td style="text-align:right;">
+3.215
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Hornet Sportabout
+</td>
+<td style="text-align:right;">
+18.7
+</td>
+<td style="text-align:right;">
+8
+</td>
+<td style="text-align:right;">
+360
+</td>
+<td style="text-align:right;">
+175
+</td>
+<td style="text-align:right;">
+3.15
+</td>
+<td style="text-align:right;">
+3.440
+</td>
+</tr>
+</tbody>
+</table>
+</div>
+</div>
+<div id="celltext-specification" class="section level1">
+<h1>Cell/Text Specification</h1>
+<p>Function <code>cell_spec</code> is introduced in version 0.6.0 of <code>kableExtra</code>. Unlike <code>column_spec</code> and <code>row_spec</code>, <strong>this function is designed to be used before the data.frame gets into the <code>kable</code> function</strong>. Comparing with figuring out a list of 2 dimentional index for targeted cells, this design is way easier to learn and use and it fits perfectly well with <code>dplyr</code>’s <code>mutate</code> and <code>summarize</code> functions. With this design, there are two things to be noted: * Since <code>cell_spec</code> generates raw <code>HTML</code> or <code>LaTeX</code> code, make sure you remember to put <code>escape = FALSE</code> in <code>kable</code>. At the same time, you have to escape special symbols including <code>%</code> manually by yourself * <code>cell_spec</code> needs a way to know whether you want <code>html</code> or <code>latex</code>. You can specify it locally in function or globally via the <code>options(knitr.table.format = &quot;latex&quot;)</code> method as suggested at the beginning. If you don’t provide anything, this function will output as HTML by default.</p>
+<p>Currently, <code>cell_spec</code> supports features including bold, italic, monospace, text color, background color, align, font size &amp; rotation angle. More features may be added in the future. Please see function documentations as reference.</p>
+<div id="conditional-logic" class="section level2">
+<h2>Conditional logic</h2>
+<p>It is very easy to use <code>cell_spec</code> with conditional logic. Here is an example.</p>
+<pre class="r"><code>library(dplyr)
+mtcars[1:10, 1:2] %&gt;%
+  mutate(
+    car = row.names(.),
+    # You don't need format = &quot;html&quot; if you have ever defined options(knitr.table.format)
+    mpg = cell_spec(mpg, &quot;html&quot;, color = ifelse(mpg &gt; 20, &quot;red&quot;, &quot;blue&quot;)),
+    cyl = cell_spec(cyl, &quot;html&quot;, color = &quot;white&quot;, align = &quot;c&quot;, angle = 45, 
+                    background = factor(cyl, c(4, 6, 8), 
+                                        c(&quot;#666666&quot;, &quot;#999999&quot;, &quot;#BBBBBB&quot;)))
+  ) %&gt;%
+  select(car, mpg, cyl) %&gt;%
+  kable(&quot;html&quot;, escape = F) %&gt;%
+  kable_styling(&quot;striped&quot;, full_width = F)</code></pre>
+<table class="table table-striped" style="width: auto !important; margin-left: auto; margin-right: auto;">
+<thead>
 <tr>
 <th style="text-align:left;">
 car
@@ -1853,152 +1979,435 @@
 <th style="text-align:left;">
 cyl
 </th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:left;">
+Mazda RX4
+</td>
+<td style="text-align:left;">
+<span style="color: red;">21</span>
+</td>
+<td style="text-align:left;">
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #999999;text-align: c;">6</span></span>
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Mazda RX4 Wag
+</td>
+<td style="text-align:left;">
+<span style="color: red;">21</span>
+</td>
+<td style="text-align:left;">
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #999999;text-align: c;">6</span></span>
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Datsun 710
+</td>
+<td style="text-align:left;">
+<span style="color: red;">22.8</span>
+</td>
+<td style="text-align:left;">
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #666666;text-align: c;">4</span></span>
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Hornet 4 Drive
+</td>
+<td style="text-align:left;">
+<span style="color: red;">21.4</span>
+</td>
+<td style="text-align:left;">
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #999999;text-align: c;">6</span></span>
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Hornet Sportabout
+</td>
+<td style="text-align:left;">
+<span style="color: blue;">18.7</span>
+</td>
+<td style="text-align:left;">
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #BBBBBB;text-align: c;">8</span></span>
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Valiant
+</td>
+<td style="text-align:left;">
+<span style="color: blue;">18.1</span>
+</td>
+<td style="text-align:left;">
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #999999;text-align: c;">6</span></span>
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Duster 360
+</td>
+<td style="text-align:left;">
+<span style="color: blue;">14.3</span>
+</td>
+<td style="text-align:left;">
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #BBBBBB;text-align: c;">8</span></span>
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Merc 240D
+</td>
+<td style="text-align:left;">
+<span style="color: red;">24.4</span>
+</td>
+<td style="text-align:left;">
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #666666;text-align: c;">4</span></span>
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Merc 230
+</td>
+<td style="text-align:left;">
+<span style="color: red;">22.8</span>
+</td>
+<td style="text-align:left;">
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #666666;text-align: c;">4</span></span>
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Merc 280
+</td>
+<td style="text-align:left;">
+<span style="color: blue;">19.2</span>
+</td>
+<td style="text-align:left;">
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #999999;text-align: c;">6</span></span>
+</td>
+</tr>
+</tbody>
+</table>
+</div>
+<div id="visualize-data-with-viridis-color" class="section level2">
+<h2>Visualize data with Viridis Color</h2>
+<p>This package also comes with a few helper functions, including <code>spec_color</code>, <code>spec_font_size</code> &amp; <code>spec_angle</code>. These functions can rescale continuous variables to certain scales. For example, function <code>spec_color</code> would map a continuous variable to any <a href="https://cran.r-project.org/web/packages/viridis/vignettes/intro-to-viridis.html">viridis color palettes</a>. It offers a very visually impactful representation in a tabular format.</p>
+<pre class="r"><code>iris[1:10, ] %&gt;%
+  mutate_if(is.numeric, function(x) {
+    cell_spec(x, &quot;html&quot;, bold = T, color = spec_color(x, end = 0.9),
+              font_size = spec_font_size(x))
+  }) %&gt;%
+  mutate(Species = cell_spec(
+    Species, &quot;html&quot;, color = &quot;white&quot;, bold = T,
+    background = spec_color(1:10, end = 0.9, option = &quot;A&quot;, direction = -1)
+  )) %&gt;%
+  kable(&quot;html&quot;, escape = F, align = &quot;c&quot;) %&gt;%
+  kable_styling(&quot;striped&quot;, full_width = F)</code></pre>
+<table class="table table-striped" style="width: auto !important; margin-left: auto; margin-right: auto;">
+<thead>
+<tr>
+<th style="text-align:center;">
+Sepal.Length
+</th>
+<th style="text-align:center;">
+Sepal.Width
+</th>
+<th style="text-align:center;">
+Petal.Length
+</th>
+<th style="text-align:center;">
+Petal.Width
+</th>
+<th style="text-align:center;">
+Species
+</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(40, 174, 128, 1);font-size: 14px;">5.1</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(31, 154, 138, 1);font-size: 13px;">3.5</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(254, 206, 145, 1);">setosa</span>
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(37, 131, 142, 1);font-size: 12px;">4.9</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(72, 34, 116, 1);font-size: 9px;">3</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(254, 160, 109, 1);">setosa</span>
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(57, 87, 140, 1);font-size: 10px;">4.7</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(56, 88, 140, 1);font-size: 10px;">3.2</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 8px;">1.3</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(246, 110, 92, 1);">setosa</span>
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(67, 62, 133, 1);font-size: 10px;">4.6</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(67, 62, 133, 1);font-size: 10px;">3.1</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(37, 131, 142, 1);font-size: 12px;">1.5</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(222, 73, 104, 1);">setosa</span>
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(31, 154, 138, 1);font-size: 13px;">5</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(41, 175, 127, 1);font-size: 14px;">3.6</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(183, 55, 121, 1);">setosa</span>
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(187, 223, 39, 1);font-size: 16px;">5.4</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(187, 223, 39, 1);font-size: 16px;">3.9</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(187, 223, 39, 1);font-size: 16px;">1.7</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(187, 223, 39, 1);font-size: 16px;">0.4</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(140, 41, 129, 1);">setosa</span>
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(67, 62, 133, 1);font-size: 10px;">4.6</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(37, 131, 142, 1);font-size: 12px;">3.4</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(34, 168, 132, 1);font-size: 13px;">0.3</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(100, 26, 128, 1);">setosa</span>
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(31, 154, 138, 1);font-size: 13px;">5</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(37, 131, 142, 1);font-size: 12px;">3.4</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(37, 131, 142, 1);font-size: 12px;">1.5</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(60, 15, 112, 1);">setosa</span>
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 8px;">4.4</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 8px;">2.9</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(20, 14, 54, 1);">setosa</span>
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(37, 131, 142, 1);font-size: 12px;">4.9</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(67, 62, 133, 1);font-size: 10px;">3.1</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(37, 131, 142, 1);font-size: 12px;">1.5</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 8px;">0.1</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(0, 0, 4, 1);">setosa</span>
+</td>
+</tr>
+</tbody>
+</table>
+<p>In the example above, I’m using the <code>mutate</code> functions from <code>dplyr</code>. You don’t have to use it. Base R solutions like <code>iris$Species &lt;- cell_spec(iris$Species, color = &quot;red&quot;)</code> also works.</p>
+</div>
+<div id="text-specification" class="section level2">
+<h2>Text Specification</h2>
+<p>If you check the results of <code>cell_spec</code>, you will find that this function does nothing more than wrapping the text with appropriate HTML/LaTeX formatting syntax. The result of this function is just a vector of character strings. As a result, when you are writing a <code>rmarkdown</code> document or write some text in shiny apps, if you need extra markups other than <strong>bold</strong> or <em>italic</em>, you may use this function to <span style="color: red;">color</span>, <span style="font-size: 16px;">change font size </span> or <span style="-webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); display: inline-block; "><span style>rotate</span></span> your text.</p>
+<p>An aliased function <code>text_spec</code> is also provided for a more literal writing experience. In HTML, there is no difference between these two functions.</p>
+<pre class="r"><code>sometext &lt;- strsplit(paste0(
+  &quot;You can even try do do some crazy things like this paragraph. &quot;, 
+  &quot;It seems to be a useless feature at this moment but who cares. &quot;, 
+  &quot;It is so fun to play with color that I can't stop. ;)&quot;
+), &quot; &quot;)[[1]]
+text_formatted &lt;- paste(
+  text_spec(sometext, &quot;html&quot;, color = spec_color(1:length(sometext), end = 0.9),
+            font_size = spec_font_size(1:length(sometext), begin = 5, end = 20)),
+  collapse = &quot; &quot;)
+
+# To display the text, type `r text_formatted` outside of the chunk</code></pre>
+<p><span style="color: rgba(68, 1, 84, 1);font-size: 5px;">You</span> <span style="color: rgba(70, 10, 93, 1);font-size: 5px;">can</span> <span style="color: rgba(72, 20, 102, 1);font-size: 6px;">even</span> <span style="color: rgba(72, 28, 110, 1);font-size: 6px;">try</span> <span style="color: rgba(72, 36, 117, 1);font-size: 7px;">do</span> <span style="color: rgba(71, 43, 122, 1);font-size: 7px;">do</span> <span style="color: rgba(70, 51, 127, 1);font-size: 7px;">some</span> <span style="color: rgba(68, 58, 131, 1);font-size: 8px;">crazy</span> <span style="color: rgba(65, 65, 134, 1);font-size: 8px;">things</span> <span style="color: rgba(62, 73, 137, 1);font-size: 9px;">like</span> <span style="color: rgba(60, 80, 139, 1);font-size: 9px;">this</span> <span style="color: rgba(57, 87, 140, 1);font-size: 9px;">paragraph.</span> <span style="color: rgba(53, 94, 141, 1);font-size: 10px;">It</span> <span style="color: rgba(50, 100, 142, 1);font-size: 10px;">seems</span> <span style="color: rgba(48, 105, 142, 1);font-size: 11px;">to</span> <span style="color: rgba(45, 112, 142, 1);font-size: 11px;">be</span> <span style="color: rgba(43, 117, 142, 1);font-size: 11px;">a</span> <span style="color: rgba(41, 123, 142, 1);font-size: 12px;">useless</span> <span style="color: rgba(38, 130, 142, 1);font-size: 12px;">feature</span> <span style="color: rgba(36, 135, 142, 1);font-size: 13px;">at</span> <span style="color: rgba(34, 141, 141, 1);font-size: 13px;">this</span> <span style="color: rgba(32, 146, 140, 1);font-size: 14px;">moment</span> <span style="color: rgba(31, 153, 138, 1);font-size: 14px;">but</span> <span style="color: rgba(31, 159, 136, 1);font-size: 14px;">who</span> <span style="color: rgba(32, 163, 134, 1);font-size: 15px;">cares.</span> <span style="color: rgba(36, 170, 131, 1);font-size: 15px;">It</span> <span style="color: rgba(41, 175, 127, 1);font-size: 16px;">is</span> <span style="color: rgba(49, 181, 123, 1);font-size: 16px;">so</span> <span style="color: rgba(59, 187, 117, 1);font-size: 16px;">fun</span> <span style="color: rgba(70, 192, 111, 1);font-size: 17px;">to</span> <span style="color: rgba(83, 197, 105, 1);font-size: 17px;">play</span> <span style="color: rgba(95, 202, 97, 1);font-size: 18px;">with</span> <span style="color: rgba(110, 206, 88, 1);font-size: 18px;">color</span> <span style="color: rgba(123, 209, 81, 1);font-size: 18px;">that</span> <span style="color: rgba(138, 214, 71, 1);font-size: 19px;">I</span> <span style="color: rgba(155, 217, 60, 1);font-size: 19px;">can’t</span> <span style="color: rgba(171, 220, 50, 1);font-size: 20px;">stop.</span> <span style="color: rgba(187, 223, 39, 1);font-size: 20px;">;)</span></p>
+</div>
+<div id="tooltip" class="section level2">
+<h2>Tooltip</h2>
+<p>It’s very easy to add a tooltip to text via <code>cell_spec</code>. For example, <code>text_spec(&quot;tooltip&quot;, color = &quot;red&quot;, tooltip = &quot;Hello World&quot;)</code> will give you something like <span style="color: red;" data-toggle="tooltip" data-placement="right" title="Hello World">Hover over me</span> (you need to wait for a few seconds before your browser renders it).</p>
+<p>Note that the original browser-based tooltip is slow. If you want to have a faster response, you may want to initialize bootstrap’s tooltip by putting the following HTML code on the page.</p>
+<pre><code>&lt;script&gt;
+$(document).ready(function(){
+    $('[data-toggle=&quot;tooltip&quot;]').tooltip(); 
+});
+&lt;/script&gt;</code></pre>
+<p>In a rmarkdown document, you can just drop it outside of any R chunks. Unfortunately however, for rmarkdown pages with a <strong>floating TOC</strong> (like this page), you can’t use bootstrap tooltips because there is a conflict in namespace between Bootstrap and JQueryUI (tocify.js). As a result, I can’t provide a live demo here. If you want to have a tooltip together with a floating TOC, you should use <code>popover</code> which has a very similar effect.</p>
+</div>
+<div id="popover-message" class="section level2">
+<h2>Popover Message</h2>
+<p>The popover message looks very similar with tooltip but it can hold more contents. Unlike tooltip which can minimally work without you manually enable that module, you <strong>have to</strong> enable the <code>popover</code> module to get it work. The upper side is that there is no conflict between Bootstrap &amp; JQueryUI this time, you can use it without any concern.</p>
+<pre><code>&lt;script&gt;
+$(document).ready(function(){
+    $('[data-toggle=&quot;popover&quot;]').popover(); 
+});
+&lt;/script&gt;</code></pre>
+<script>
+$(document).ready(function(){
+    $('[data-toggle="popover"]').popover(); 
+});
+</script>
+<pre class="r"><code>popover_dt &lt;- data.frame(
+  position = c(&quot;top&quot;, &quot;bottom&quot;, &quot;right&quot;, &quot;left&quot;),
+  stringsAsFactors = FALSE
+)
+popover_dt$`Hover over these items` &lt;- cell_spec(
+  paste(&quot;Message on&quot;, popover_dt$position), # Cell texts
+  popover = spec_popover(
+    content = popover_dt$position,
+    title = NULL,                           # title will add a Title Panel on top
+    position = popover_dt$position
+  ))
+kable(popover_dt, &quot;html&quot;, escape = FALSE) %&gt;%
+  kable_styling(&quot;striped&quot;, full_width = FALSE)</code></pre>
+<table class="table table-striped" style="width: auto !important; margin-left: auto; margin-right: auto;">
+<thead>
+<tr>
 <th style="text-align:left;">
-disp
+position
 </th>
 <th style="text-align:left;">
-fancy
+Hover over these items
 </th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td style="text-align:left;">
-<div style=" font-weight: bold;color: #000004FF;">
-Mazda RX4
-</div>
+top
 </td>
 <td style="text-align:left;">
-<div style="font-size: 18px;">
-21
-</div>
-</td>
-<td style="text-align:left;">
-<div style="color: white;border-radius: 4px; padding-right: 2px; background-color: red;text-align: center;-webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg);" data-toggle="tooltip" title="&lt;div style=&quot;font-size: 18px;&quot;&gt;21&lt;/div&gt;">
-6
-</div>
-</td>
-<td style="text-align:left;">
-<div style=" font-style: italic;color: green;">
-160
-</div>
-</td>
-<td style="text-align:left;">
-<div style="color: #000004FF;font-size: 12px;">
-12
-</div>
+<span style data-toggle="popover" data-trigger="hover" data-placement="top" data-content="top">Message on top</span>
 </td>
 </tr>
 <tr>
 <td style="text-align:left;">
-<div style=" font-weight: bold;color: #420A68FF;">
-Mazda RX4 Wag
-</div>
+bottom
 </td>
 <td style="text-align:left;">
-<div style="font-size: 18px;">
-21
-</div>
-</td>
-<td style="text-align:left;">
-<div style="color: white;border-radius: 4px; padding-right: 2px; background-color: red;text-align: center;-webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg);" data-toggle="tooltip" title="&lt;div style=&quot;font-size: 18px;&quot;&gt;21&lt;/div&gt;">
-6
-</div>
-</td>
-<td style="text-align:left;">
-<div style=" font-style: italic;color: green;">
-160
-</div>
-</td>
-<td style="text-align:left;">
-<div style="color: #420A68FF;font-size: 14px;">
-14
-</div>
+<span style data-toggle="popover" data-trigger="hover" data-placement="bottom" data-content="bottom">Message on bottom</span>
 </td>
 </tr>
 <tr>
 <td style="text-align:left;">
-<div style=" font-weight: bold;color: #932667FF;">
-Datsun 710
-</div>
+right
 </td>
 <td style="text-align:left;">
-<div style="font-size: 18px;">
-22.8
-</div>
-</td>
-<td style="text-align:left;">
-<div style="color: white;border-radius: 4px; padding-right: 2px; background-color: red;text-align: center;-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg);" data-toggle="tooltip" title="&lt;div style=&quot;font-size: 18px;&quot;&gt;22.8&lt;/div&gt;">
-4
-</div>
-</td>
-<td style="text-align:left;">
-<div style=" font-style: italic;color: green;">
-108
-</div>
-</td>
-<td style="text-align:left;">
-<div style="color: #932667FF;font-size: 16px;">
-16
-</div>
+<span style data-toggle="popover" data-trigger="hover" data-placement="right" data-content="right">Message on right</span>
 </td>
 </tr>
 <tr>
 <td style="text-align:left;">
-<div style=" font-weight: bold;color: #DD513AFF;">
-Hornet 4 Drive
-</div>
+left
 </td>
 <td style="text-align:left;">
-<div style="font-size: 18px;">
-21.4
-</div>
-</td>
-<td style="text-align:left;">
-<div style="color: white;border-radius: 4px; padding-right: 2px; background-color: red;text-align: center;-webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -ms-transform: rotate(240deg); -o-transform: rotate(240deg);" data-toggle="tooltip" title="&lt;div style=&quot;font-size: 18px;&quot;&gt;21.4&lt;/div&gt;">
-6
-</div>
-</td>
-<td style="text-align:left;">
-<div style=" font-weight: bold;color: red;">
-258
-</div>
-</td>
-<td style="text-align:left;">
-<div style="color: #DD513AFF;font-size: 18px;">
-18
-</div>
-</td>
-</tr>
-<tr>
-<td style="text-align:left;">
-<div style=" font-weight: bold;color: #FCA50AFF;">
-Hornet Sportabout
-</div>
-</td>
-<td style="text-align:left;">
-18.7
-</td>
-<td style="text-align:left;">
-<div style="color: white;border-radius: 4px; padding-right: 2px; background-color: red;text-align: center;-webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -ms-transform: rotate(300deg); -o-transform: rotate(300deg);" data-toggle="tooltip" title="18.7">
-8
-</div>
-</td>
-<td style="text-align:left;">
-<div style=" font-weight: bold;color: red;">
-360
-</div>
-</td>
-<td style="text-align:left;">
-<div style="color: #FCA50AFF;font-size: 20px;">
-20
-</div>
+<span style data-toggle="popover" data-trigger="hover" data-placement="left" data-content="left">Message on left</span>
 </td>
 </tr>
 </tbody>
 </table>
-<div id="section" class="section level2">
-<h2></h2>
+</div>
+<div id="links" class="section level2">
+<h2>Links</h2>
+<p>You can add links to text via <code>text_spec(&quot;Google&quot;, link = &quot;https://google.com&quot;)</code>: <a href="https://google.com" style>Google</a>. If you want your hover message to be more obvious, it might be a good idea to put a <code>#</code> in the <code>link</code> option. <code>text_spec(&quot;Hover on me&quot;, link = &quot;#&quot;, popover = &quot;Hello&quot;)</code>: <a href="#" style data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Hello">Hover on me</a></p>
 </div>
 </div>
 <div id="grouped-columns-rows" class="section level1">
@@ -3005,7 +3414,7 @@
 3
 </td>
 <td style="text-align:center;">
-1
+0
 </td>
 </tr>
 <tr>
@@ -3021,7 +3430,7 @@
 5
 </td>
 <td style="text-align:center;">
-0
+1
 </td>
 </tr>
 <tr>
@@ -3029,7 +3438,7 @@
 6
 </td>
 <td style="text-align:center;">
-1
+0
 </td>
 </tr>
 <tr>
@@ -3086,7 +3495,7 @@
 12
 </td>
 <td style="text-align:center;">
-0
+1
 </td>
 </tr>
 <tr>
@@ -3105,7 +3514,7 @@
 14
 </td>
 <td style="text-align:center;">
-0
+1
 </td>
 </tr>
 <tr>
diff --git a/docs/awesome_table_in_pdf.Rmd b/docs/awesome_table_in_pdf.Rmd
index aa7888c..53fa39a 100644
--- a/docs/awesome_table_in_pdf.Rmd
+++ b/docs/awesome_table_in_pdf.Rmd
@@ -198,6 +198,16 @@
   row_spec(3:5, bold = T, color = "white", background = "black")
 ```
 
+## Header Rows
+One special case of `row_spec` is that you can specify the format of the header row via `row_spec(row = 0, ...)`. 
+```{r}
+kable(dt, format = "latex", booktabs = T, align = "c") %>%
+  kable_styling(latex_options = "striped", full_width = F) %>%
+  row_spec(0, angle = 45)
+```
+
+
+
 # Cell/Text Specification
 Function `cell_spec` is introduced in version 0.6.0 of `kableExtra`. Unlike `column_spec` and `row_spec`, **this function is designed to be used before the data.frame gets into the `kable` function**. Comparing with figuring out a list of 2 dimentional index for targeted cells, this design is way easier to learn and use and it fits perfectly well with `dplyr`'s `mutate` and `summarize` functions. With this design, there are two things to be noted:
 * Since `cell_spec` generates raw `HTML` or `LaTeX` code, make sure you remember to put `escape = FALSE` in `kable`. At the same time, you have to escape special symbols including `%` manually by yourself
@@ -207,15 +217,14 @@
 
 ## Conditional logic
 It is very easy to use `cell_spec` with conditional logic. Here is an example.
-```{r}
-suppressMessages(library(dplyr))
+```{r, message=FALSE, warning=FALSE}
+library(dplyr)
 mtcars[1:10, 1:2] %>%
   mutate(
-    # Since we are using tibble, we need to get the rownames
     car = row.names(.),
-    # You don't need "latex" if you have ever defined options(knitr.table.format)
-    mpg = cell_spec(mpg, "latex", color = ifelse(mpg > 20, "green", "red")),
-    cyl = cell_spec(cyl, "latex", color = "white", align = "c", angle = 90, 
+    # You don't need format = "latex" if you have ever defined options(knitr.table.format)
+    mpg = cell_spec(mpg, "latex", color = ifelse(mpg > 20, "red", "blue")),
+    cyl = cell_spec(cyl, "latex", color = "white", align = "c", angle = 45, 
                     background = factor(cyl, c(4, 6, 8), 
                                         c("#666666", "#999999", "#BBBBBB")))
   ) %>%
@@ -229,11 +238,11 @@
 ```{r}
 iris[1:10, ] %>%
   mutate_if(is.numeric, function(x) {
-    cell_spec(x, bold = T, color = spec_color(x, end = 0.9),
+    cell_spec(x, "latex", bold = T, color = spec_color(x, end = 0.9),
               font_size = spec_font_size(x))
   }) %>%
   mutate(Species = cell_spec(
-    Species, color = "white", bold = T,
+    Species, "latex", color = "white", bold = T,
     background = spec_color(1:10, end = 0.9, option = "A", direction = -1)
   )) %>%
   kable("latex", escape = F, booktabs = T, linesep = "", align = "c")
@@ -244,15 +253,17 @@
 ## Text Specification
 If you check the results of `cell_spec`, you will find that this function does nothing more than wrapping the text with appropriate HTML/LaTeX formatting syntax. The result of this function is just a vector of character strings. As a result, when you are writing a `rmarkdown` document or write some text in shiny apps, if you need extra markups other than **bold** or *italic*, you may use this function to `r text_spec("color", color = "red")`, `r text_spec("change font size ", font_size = 16)` or `r text_spec("rotate", angle = 30)` your text. 
 
-An alias function `text_spec` is also provided for a more literal writing experience. The only difference is that in LaTeX, unless you specify `latex_background_in_cell = FALSE` (default is `TRUE`) in `cell_spec`, it will define cell background color as `\cellcolor{}`, which doesn't work outside of a table, while for `text_spec`, the default value for `latex_background_in_cell` is `FALSE`.
+An aliased function `text_spec` is also provided for a more literal writing experience. The only difference is that in LaTeX, unless you specify `latex_background_in_cell = FALSE` (default is `TRUE`) in `cell_spec`, it will define cell background color as `\cellcolor{}`, which doesn't work outside of a table, while for `text_spec`, the default value for `latex_background_in_cell` is `FALSE`.
 
 ```{r}
 sometext <- strsplit(paste0(
   "You can even try do do some crazy things like this paragraph. Although ",
-  "it's probably a useless feature but you may find it's fun to play with. :)"
+  "it seems to be a useless feature at this moment, it is so fun to play ",
+  "with that I can't stop. :P"
 ), " ")[[1]]
 text_formatted <- paste(
-  text_spec(sometext, color = spec_color(1:length(sometext), end = 0.8, option = "A")),
+  text_spec(sometext, "latex", color = spec_color(1:length(sometext), end = 0.9),
+            font_size = spec_font_size(1:length(sometext), begin = 5, end = 20)),
   collapse = " ")
 
 # To display the text, type `r text_formatted` outside of the chunk
diff --git a/docs/awesome_table_in_pdf.pdf b/docs/awesome_table_in_pdf.pdf
index d84b4bc..3987820 100644
--- a/docs/awesome_table_in_pdf.pdf
+++ b/docs/awesome_table_in_pdf.pdf
Binary files differ