diff --git a/DESCRIPTION b/DESCRIPTION
index 4886c5f..bafe3e9 100644
--- a/DESCRIPTION
+++ b/DESCRIPTION
@@ -35,11 +35,13 @@
     readr,
     scales, 
     viridisLite,
-    stats
+    stats,
+    grDevices
 Suggests:
     testthat,
     magick,
-    formattable
+    formattable,
+    dplyr
 VignetteBuilder: knitr
 Encoding: UTF-8
 RoxygenNote: 6.0.1
diff --git a/NAMESPACE b/NAMESPACE
index f800cc5..92a87a8 100644
--- a/NAMESPACE
+++ b/NAMESPACE
@@ -23,6 +23,7 @@
 export(spec_tooltip)
 export(text_spec)
 export(usepackage_latex)
+importFrom(grDevices,col2rgb)
 importFrom(knitr,include_graphics)
 importFrom(knitr,knit_meta_add)
 importFrom(magrittr,"%>%")
diff --git a/R/kableExtra-package.R b/R/kableExtra-package.R
index 0e9df80..2aa3c7b 100644
--- a/R/kableExtra-package.R
+++ b/R/kableExtra-package.R
@@ -69,6 +69,7 @@
 #' @importFrom scales rescale
 #' @importFrom viridisLite viridis
 #' @importFrom stats ave
+#' @importFrom grDevices col2rgb
 #' @name kableExtra-package
 #' @aliases kableExtra
 #' @docType package
diff --git a/R/spec_tools.R b/R/spec_tools.R
index bd27df4..f62f9e3 100644
--- a/R/spec_tools.R
+++ b/R/spec_tools.R
@@ -58,8 +58,8 @@
 #' @param begin Smallest degree to rotate. Default is 0
 #' @param end Largest degree to rotate. Default is 359.
 #' @export
-spec_angle <- function(x) {
-  x <- round(rescale(x, c(0, 359)))
+spec_angle <- function(x, begin, end) {
+  x <- round(rescale(x, c(begin, end)))
   x[is.na(x)] <- 0
   return(x)
 }
diff --git a/docs/awesome_table_in_html.Rmd b/docs/awesome_table_in_html.Rmd
index 1ccb5b5..705b370 100644
--- a/docs/awesome_table_in_html.Rmd
+++ b/docs/awesome_table_in_html.Rmd
@@ -204,7 +204,7 @@
 
 ```{r}
 sometext <- strsplit(paste0(
-  "You can even try do do some crazy things like this paragraph. ", 
+  "You can even try to make 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. ;D"
 ), " ")[[1]]
diff --git a/docs/awesome_table_in_html.html b/docs/awesome_table_in_html.html
index 9d66c7b..254b9d1 100644
--- a/docs/awesome_table_in_html.html
+++ b/docs/awesome_table_in_html.html
@@ -2309,7 +2309,7 @@
 <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;You can even try to make 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. ;D&quot;
 ), &quot; &quot;)[[1]]
@@ -2319,7 +2319,7 @@
   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;">;D</span></p>
+<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;">to</span> <span style="color: rgba(71, 43, 122, 1);font-size: 7px;">make</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;">;D</span></p>
 </div>
 <div id="tooltip" class="section level2">
 <h2>Tooltip</h2>
@@ -3422,7 +3422,7 @@
 4
 </td>
 <td style="text-align:center;">
-1
+0
 </td>
 </tr>
 <tr>
@@ -3430,7 +3430,7 @@
 5
 </td>
 <td style="text-align:center;">
-1
+0
 </td>
 </tr>
 <tr>
@@ -3446,7 +3446,7 @@
 7
 </td>
 <td style="text-align:center;">
-1
+0
 </td>
 </tr>
 <tr>
@@ -3465,7 +3465,7 @@
 9
 </td>
 <td style="text-align:center;">
-1
+0
 </td>
 </tr>
 <tr>
@@ -3495,7 +3495,7 @@
 12
 </td>
 <td style="text-align:center;">
-0
+1
 </td>
 </tr>
 <tr>
@@ -3506,7 +3506,7 @@
 13
 </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 7141ebc..52da10b 100644
--- a/docs/awesome_table_in_pdf.Rmd
+++ b/docs/awesome_table_in_pdf.Rmd
@@ -257,7 +257,7 @@
 
 ```{r}
 sometext <- strsplit(paste0(
-  "You can even try do do some crazy things like this paragraph. ", 
+  "You can even try to make 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. ;D"
 ), " ")[[1]]
diff --git a/docs/awesome_table_in_pdf.pdf b/docs/awesome_table_in_pdf.pdf
index 975a248..9039871 100644
--- a/docs/awesome_table_in_pdf.pdf
+++ b/docs/awesome_table_in_pdf.pdf
Binary files differ
diff --git a/docs/use_kableExtra_with_formattable.Rmd b/docs/use_kableExtra_with_formattable.Rmd
index 99f8c2f..e19dd2f 100644
--- a/docs/use_kableExtra_with_formattable.Rmd
+++ b/docs/use_kableExtra_with_formattable.Rmd
@@ -37,19 +37,24 @@
 
 Also, if you are using it in this way, make sure you put `escape = F` in `kable`. 
 
-On the other hand, `cell_spec()` is a new function in `kableExtra()` to format cells _**before you pipe the table into `kable`**_. Note that you can either specify format (`html` or `latex`) in function or do that via `options(knitr.table.format)` so you don't need to do it everytime. 
+On the other hand, `cell_spec()` is a new function in `kableExtra()` to format cells _**before you pipe the table into `kable`**_. Note that you can either specify format (`html` or `latex`) in function or do that via `options(knitr.table.format)` so you don't need to do it everytime. Please refer to the package vignette for details. 
 
-***
-
-I also added a few helper functions to use together with cell_spec. One good example is `spec_color`, which gives you the ability to use viridis color map in your table. Others include `spec_font_size` and `spec_angle`. 
+<script>
+$(document).ready(function(){
+    $('[data-toggle="tooltip"]').tooltip(); 
+});
+</script>
 
 ```{r}
 iris[1:10, ] %>%
+  mutate(
+    Species = cell_spec(Species, color = spec_color(1:10, option = "A"), link = "#",
+                        tooltip = paste0("Sepal Length: ", Sepal.Length))
+  ) %>%
   mutate_if(is.numeric, function(x){
-    cell_spec(x, "html", color = spec_color(x), bold = T)
+    cell_spec(x, "html", color = spec_color(x), font_size = spec_font_size(x), bold = T)
   }) %>%
-  mutate(Species = cell_spec(Species, background = "red")) %>%
-  kable("html", col.names = c("A", "B", "C", "D", "DDDDDDDDDDD"), escape = F, align = "c") %>%
+  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 4ea68ad..6d5006c 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-21" />
+<meta name="date" content="2017-10-24" />
 
 <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-21</em></h4>
+<h4 class="date"><em>2017-10-24</em></h4>
 
 </div>
 
@@ -188,9 +188,7 @@
 <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffcc6f">21.0</span>
 </td>
 <td style="text-align:left;">
-<div style="-webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg);">
-<span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">6</span>
-</div>
+<span style="-webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">6</span></span>
 </td>
 <td style="text-align:left;">
 <span style=" font-style: italic;color: green;">160</span>
@@ -207,9 +205,7 @@
 <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffcc6f">21.0</span>
 </td>
 <td style="text-align:left;">
-<div style="-webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg);">
-<span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">6</span>
-</div>
+<span style="-webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">6</span></span>
 </td>
 <td style="text-align:left;">
 <span style=" font-style: italic;color: green;">160</span>
@@ -226,9 +222,7 @@
 <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffa500">22.8</span>
 </td>
 <td style="text-align:left;">
-<div style="-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);">
-<span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">4</span>
-</div>
+<span style="-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">4</span></span>
 </td>
 <td style="text-align:left;">
 <span style=" font-style: italic;color: green;">108</span>
@@ -245,9 +239,7 @@
 <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffc357">21.4</span>
 </td>
 <td style="text-align:left;">
-<div style="-webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -ms-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg);">
-<span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">6</span>
-</div>
+<span style="-webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -ms-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">6</span></span>
 </td>
 <td style="text-align:left;">
 <span style=" font-weight: bold;color: red;">258</span>
@@ -264,9 +256,7 @@
 <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffffff">18.7</span>
 </td>
 <td style="text-align:left;">
-<div style="-webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -ms-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg);">
-<span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">8</span>
-</div>
+<span style="-webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -ms-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">8</span></span>
 </td>
 <td style="text-align:left;">
 <span style=" font-weight: bold;color: red;">360</span>
@@ -279,206 +269,212 @@
 </table>
 <p>Here is a little bit more explanation. Both <code>formattable::color_tile</code> and <code>formattable::color_bar</code> returns a function object which can take a numeric vector. That’s why you can put things like <code>(mpg)</code> after <code>color_tile(&quot;white&quot;, &quot;orange&quot;)</code> as you can see in the <code>mutate</code> function. This way of using the function may look a little odd but is totally valid (, I think :P).</p>
 <p>Also, if you are using it in this way, make sure you put <code>escape = F</code> in <code>kable</code>.</p>
-<p>On the other hand, <code>cell_spec()</code> is a new function in <code>kableExtra()</code> to format cells <em><strong>before you pipe the table into <code>kable</code></strong></em>. Note that you can either specify format (<code>html</code> or <code>latex</code>) in function or do that via <code>options(knitr.table.format)</code> so you don’t need to do it everytime.</p>
-<hr />
-<p>I also added a few helper functions to use together with cell_spec. One good example is <code>spec_color</code>, which gives you the ability to use viridis color map in your table. Others include <code>spec_font_size</code> and <code>spec_angle</code>.</p>
+<p>On the other hand, <code>cell_spec()</code> is a new function in <code>kableExtra()</code> to format cells <em><strong>before you pipe the table into <code>kable</code></strong></em>. Note that you can either specify format (<code>html</code> or <code>latex</code>) in function or do that via <code>options(knitr.table.format)</code> so you don’t need to do it everytime. Please refer to the package vignette for details.</p>
+<script>
+$(document).ready(function(){
+    $('[data-toggle="tooltip"]').tooltip(); 
+});
+</script>
 <pre class="r"><code>iris[1:10, ] %&gt;%
+  mutate(
+    Species = cell_spec(Species, color = spec_color(1:10, option = &quot;A&quot;), link = &quot;#&quot;,
+                        tooltip = paste0(&quot;Sepal Length: &quot;, Sepal.Length))
+  ) %&gt;%
   mutate_if(is.numeric, function(x){
-    cell_spec(x, &quot;html&quot;, color = spec_color(x), bold = T)
+    cell_spec(x, &quot;html&quot;, color = spec_color(x), font_size = spec_font_size(x), bold = T)
   }) %&gt;%
-  mutate(Species = cell_spec(Species, background = &quot;red&quot;)) %&gt;%
-  kable(&quot;html&quot;, col.names = c(&quot;A&quot;, &quot;B&quot;, &quot;C&quot;, &quot;D&quot;, &quot;DDDDDDDDDDD&quot;), escape = F, align = &quot;c&quot;) %&gt;%
+  kable(&quot;html&quot;, escape = F, align = &quot;c&quot;) %&gt;%
   kable_styling(&quot;condensed&quot;, full_width = F)</code></pre>
 <pre><code>## Setting cell_spec format as html</code></pre>
 <table class="table table-condensed" style="width: auto !important; margin-left: auto; margin-right: auto;">
 <thead>
 <tr>
 <th style="text-align:center;">
-A
+Sepal.Length
 </th>
 <th style="text-align:center;">
-B
+Sepal.Width
 </th>
 <th style="text-align:center;">
-C
+Petal.Length
 </th>
 <th style="text-align:center;">
-D
+Petal.Width
 </th>
 <th style="text-align:center;">
-DDDDDDDDDDD
+Species
 </th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(66, 190, 113, 1);">5.1</span>
+<span style=" font-weight: bold;color: rgba(66, 190, 113, 1);font-size: 14px;">5.1</span>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(34, 168, 132, 1);">3.5</span>
+<span style=" font-weight: bold;color: rgba(34, 168, 132, 1);font-size: 13px;">3.5</span>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
+<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 10px;">1.4</span>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 11px;">0.2</span>
 </td>
 <td style="text-align:center;">
-<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
+<a href="#" style="color: rgba(0, 0, 4, 1);" data-toggle="tooltip" data-placement="right" title="Sepal Length: 5.1">setosa</a>
 </td>
 </tr>
 <tr>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">4.9</span>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 12px;">4.9</span>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(72, 37, 118, 1);">3</span>
+<span style=" font-weight: bold;color: rgba(72, 37, 118, 1);font-size: 9px;">3</span>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
+<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 10px;">1.4</span>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 11px;">0.2</span>
 </td>
 <td style="text-align:center;">
-<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
+<a href="#" style="color: rgba(24, 15, 61, 1);" data-toggle="tooltip" data-placement="right" title="Sepal Length: 4.9">setosa</a>
 </td>
 </tr>
 <tr>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(53, 95, 141, 1);">4.7</span>
+<span style=" font-weight: bold;color: rgba(53, 95, 141, 1);font-size: 10px;">4.7</span>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(52, 96, 141, 1);">3.2</span>
+<span style=" font-weight: bold;color: rgba(52, 96, 141, 1);font-size: 10px;">3.2</span>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);">1.3</span>
+<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(49, 104, 142, 1);">0.2</span>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 11px;">0.2</span>
 </td>
 <td style="text-align:center;">
-<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
+<a href="#" style="color: rgba(69, 16, 119, 1);" data-toggle="tooltip" data-placement="right" title="Sepal Length: 4.7">setosa</a>
 </td>
 </tr>
 <tr>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);">4.6</span>
+<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);font-size: 10px;">4.6</span>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);">3.1</span>
+<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);font-size: 10px;">3.1</span>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">1.5</span>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 12px;">1.5</span>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 11px;">0.2</span>
 </td>
 <td style="text-align:center;">
-<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
+<a href="#" style="color: rgba(114, 31, 129, 1);" data-toggle="tooltip" data-placement="right" title="Sepal Length: 4.6">setosa</a>
 </td>
 </tr>
 <tr>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(34, 168, 132, 1);">5</span>
+<span style=" font-weight: bold;color: rgba(34, 168, 132, 1);font-size: 13px;">5</span>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(68, 191, 112, 1);">3.6</span>
+<span style=" font-weight: bold;color: rgba(68, 191, 112, 1);font-size: 14px;">3.6</span>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
+<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 10px;">1.4</span>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 11px;">0.2</span>
 </td>
 <td style="text-align:center;">
-<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
+<a href="#" style="color: rgba(158, 47, 127, 1);" data-toggle="tooltip" data-placement="right" title="Sepal Length: 5">setosa</a>
 </td>
 </tr>
 <tr>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);">5.4</span>
+<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);font-size: 16px;">5.4</span>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);">3.9</span>
+<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);font-size: 16px;">3.9</span>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);">1.7</span>
+<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);font-size: 16px;">1.7</span>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);">0.4</span>
+<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);font-size: 16px;">0.4</span>
 </td>
 <td style="text-align:center;">
-<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
+<a href="#" style="color: rgba(205, 64, 113, 1);" data-toggle="tooltip" data-placement="right" title="Sepal Length: 5.4">setosa</a>
 </td>
 </tr>
 <tr>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);">4.6</span>
+<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);font-size: 10px;">4.6</span>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">3.4</span>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 12px;">3.4</span>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
+<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 10px;">1.4</span>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(53, 183, 121, 1);">0.3</span>
+<span style=" font-weight: bold;color: rgba(53, 183, 121, 1);font-size: 13px;">0.3</span>
 </td>
 <td style="text-align:center;">
-<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
+<a href="#" style="color: rgba(241, 96, 93, 1);" data-toggle="tooltip" data-placement="right" title="Sepal Length: 4.6">setosa</a>
 </td>
 </tr>
 <tr>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(34, 168, 132, 1);">5</span>
+<span style=" font-weight: bold;color: rgba(34, 168, 132, 1);font-size: 13px;">5</span>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">3.4</span>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 12px;">3.4</span>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">1.5</span>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 12px;">1.5</span>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 11px;">0.2</span>
 </td>
 <td style="text-align:center;">
-<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
+<a href="#" style="color: rgba(253, 148, 103, 1);" data-toggle="tooltip" data-placement="right" title="Sepal Length: 5">setosa</a>
 </td>
 </tr>
 <tr>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);">4.4</span>
+<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);">2.9</span>
+<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(59, 82, 139, 1);">1.4</span>
+<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 10px;">1.4</span>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 11px;">0.2</span>
 </td>
 <td style="text-align:center;">
-<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
+<a href="#" style="color: rgba(254, 202, 141, 1);" data-toggle="tooltip" data-placement="right" title="Sepal Length: 4.4">setosa</a>
 </td>
 </tr>
 <tr>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">4.9</span>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 12px;">4.9</span>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);">3.1</span>
+<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);font-size: 10px;">3.1</span>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">1.5</span>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 12px;">1.5</span>
 </td>
 <td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);">0.1</span>
+<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="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
+<a href="#" style="color: rgba(252, 253, 191, 1);" data-toggle="tooltip" data-placement="right" title="Sepal Length: 4.9">setosa</a>
 </td>
 </tr>
 </tbody>
diff --git a/man/spec_angle.Rd b/man/spec_angle.Rd
index 6bef9bb..5df2b13 100644
--- a/man/spec_angle.Rd
+++ b/man/spec_angle.Rd
@@ -4,7 +4,7 @@
 \alias{spec_angle}
 \title{Generate rotation angle for continuous values}
 \usage{
-spec_angle(x)
+spec_angle(x, begin, end)
 }
 \arguments{
 \item{x}{continuous vectors of values}
diff --git a/vignettes/awesome_table_in_html.Rmd b/vignettes/awesome_table_in_html.Rmd
index e042f65..705b370 100644
--- a/vignettes/awesome_table_in_html.Rmd
+++ b/vignettes/awesome_table_in_html.Rmd
@@ -143,6 +143,135 @@
   row_spec(3:5, bold = T, color = "white", background = "#D7261E")
 ```
 
+
+
+## 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 to make 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. ;D"
+), " ")[[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
 Tables with multi-row headers can be very useful to demonstrate grouped data. To do that, you can pipe your kable object into `add_header_above()`. The header variable is supposed to be a named character with the names as new column names and values as column span. For your convenience, if column span equals to 1, you can ignore the `=1` part so the function below can be written as `add_header_above(c(" ", "Group 1" = 2, "Group 2" = 2, "Group 3" = 2)).
diff --git a/vignettes/awesome_table_in_pdf.Rmd b/vignettes/awesome_table_in_pdf.Rmd
index 18cb068..52da10b 100644
--- a/vignettes/awesome_table_in_pdf.Rmd
+++ b/vignettes/awesome_table_in_pdf.Rmd
@@ -65,9 +65,9 @@
 library(kableExtra)
 ```
 
-If you are using R Sweave, beamer, tufte or some customized rmarkdown templates, you can put the following meta data into the `yaml` section. If you are familar with LaTeX and you know what you are doing, feel free to remove unnecessary packages from the list. 
+If you are using R Sweave, beamer, R package vignette template, tufte or some customized rmarkdown templates, you can put the following meta data into the `yaml` section. If you are familar with LaTeX and you know what you are doing, feel free to remove unnecessary packages from the list. 
 
-```{yaml}
+```
 header-includes:
   - \usepackage{booktabs}
   - \usepackage{longtable}
@@ -85,7 +85,7 @@
 ## Plain LaTeX
 Plain LaTeX table looks relatively ugly in 2017.
 ```{r}
-kable(dt, format = "latex")
+kable(dt)
 ```
 
 ## LaTeX table with booktabs
@@ -198,6 +198,78 @@
   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
+* `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 = "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")))
+  ) %>%
+  select(car, mpg, cyl) %>%
+  kable("latex", escape = F, booktabs = T, linesep = "")
+```
+
+## 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, "latex", bold = T, color = spec_color(x, end = 0.9),
+              font_size = spec_font_size(x))
+  }) %>%
+  mutate(Species = cell_spec(
+    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")
+```
+
+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. 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 to make 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. ;D"
+), " ")[[1]]
+text_formatted <- paste(
+  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
+```
+`r text_formatted`
+
 # Grouped Columns / Rows
 ## Add header rows to group columns
 Tables with multi-row headers can be very useful to demonstrate grouped data. To do that, you can pipe your kable object into `add_header_above()`. The header variable is supposed to be a named character with the names as new column names and values as column span. For your convenience, if column span equals to 1, you can ignore the `=1` part so the function below can be written as `add_header_above(c(" ", "Group 1" = 2, "Group 2" = 2, "Group 3" = 2)).
@@ -207,7 +279,7 @@
   add_header_above(c(" " = 1, "Group 1" = 2, "Group 2" = 2, "Group 3" = 2))
 ```
 
-In fact, if you want to add another row of header on top, please feel free to do so. Also, in kableExtra 0.3.0, you can specify `bold` & `italic` as you do in `row_spec()`.
+In fact, if you want to add another row of header on top, please feel free to do so. Also, since kableExtra 0.3.0, you can specify `bold` & `italic` as you do in `row_spec()`.
 ```{r}
 kable(dt, format = "latex", booktabs = T) %>%
   kable_styling(latex_options = "striped") %>%
diff --git a/vignettes/use_kableExtra_with_formattable.Rmd b/vignettes/use_kableExtra_with_formattable.Rmd
new file mode 100644
index 0000000..641fe78
--- /dev/null
+++ b/vignettes/use_kableExtra_with_formattable.Rmd
@@ -0,0 +1,63 @@
+---
+title: "Use kableExtra with formattable"
+author: "Hao Zhu"
+date: "`r Sys.Date()`"
+output: html_document
+vignette: >
+  %\VignetteIndexEntry{Use kableExtra with formattable}
+  %\VignetteEngine{knitr::rmarkdown}
+  %\VignetteEncoding{UTF-8}
+---
+
+I know you love `formattable`'s `color_tile` and `color_bar`. I do too. In my mind, these two features are among the best visualization methods in a tabular format. You may wonder if it's possible use it together with `kableExtra` so you can have a nested table with awesome presentation at the same time. Here is how. 
+
+```{r, message=FALSE, warning=FALSE}
+library(knitr)
+library(kableExtra)
+library(formattable)
+library(dplyr)
+```
+
+```{r}
+mtcars[1:5, 1:4] %>%
+  mutate(
+    car = row.names(.),
+    mpg = color_tile("white", "orange")(mpg),
+    cyl = cell_spec(cyl, "html", angle = (1:5)*60, 
+                    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)),
+    hp = color_bar("lightgreen")(hp)
+  ) %>%
+  select(car, everything()) %>%
+  kable("html", escape = F) %>%
+  kable_styling("hover", full_width = F) %>%
+  column_spec(5, width = "3cm") %>%
+  add_header_above(c(" ", "Hello" = 2, "World" = 2))
+```
+
+Here is a little bit more explanation. Both `formattable::color_tile` and `formattable::color_bar` returns a function object which can take a numeric vector. That's why you can put things like `(mpg)` after `color_tile("white", "orange")` as you can see in the `mutate` function. This way of using the function may look a little odd but is totally valid (, I think :P).
+
+Also, if you are using it in this way, make sure you put `escape = F` in `kable`. 
+
+On the other hand, `cell_spec()` is a new function in `kableExtra()` to format cells _**before you pipe the table into `kable`**_. Note that you can either specify format (`html` or `latex`) in function or do that via `options(knitr.table.format)` so you don't need to do it everytime. Please refer to the package vignette for details. 
+
+<script>
+$(document).ready(function(){
+    $('[data-toggle="tooltip"]').tooltip(); 
+});
+</script>
+
+```{r}
+iris[1:10, ] %>%
+  mutate(
+    Species = cell_spec(Species, color = spec_color(1:10, option = "A"), link = "#",
+                        tooltip = paste0("Sepal Length: ", Sepal.Length))
+  ) %>%
+  mutate_if(is.numeric, function(x){
+    cell_spec(x, "html", color = spec_color(x), font_size = spec_font_size(x), bold = T)
+  }) %>%
+  kable("html", escape = F, align = "c") %>%
+  kable_styling("condensed", full_width = F)
+```