fix checks & update vignette
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 <- 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]]
@@ -2319,7 +2319,7 @@
collapse = " ")
# 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("white", "orange")</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, ] %>%
+ 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)</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>