CODEWITHSUNDEEP
htmlrr-markdownknitrkableextra
Roccer
Roccer

Reputation: 919

Line break in popover/tooltip of kableExtra table in R markdown

I would like to have text in a pop up show upon hovering over a cell of a table. That works, however, I do not manage to get line breaks into that text. My example is adapted from here:https://haozhu233.github.io/kableExtra/awesome_table_in_html.html

---
title: "Line break in popover"
output: html_document
---

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
});

</script>

```{r echo = FALSE}

knitr::opts_chunk$set(echo = TRUE)
library(kableExtra)

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 = c("line\nbreak", "line<br/>break", "line&#013;break", "line&#10;break")))

kbl(popover_dt, escape = FALSE) %>%
  kable_paper("striped", full_width = FALSE)

```

However, what I do not get to work is to make a line break between line and break in the pop up. I tried \n, <br>, &#013;, and &#10;. No attempt seems to work. Any idea how to solve that problem?

enter image description here

Upvotes: 3

Views: 725

Answers (2)

Waldi
Waldi

Reputation: 41260

You could add custom css styling to the document, see this solution :

---
title: "Line break in popover"
output: html_document
---

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
});
</script>

```{css, echo=FALSE}
div {
  white-space: pre-wrap;
}
```

```{r echo = FALSE}

knitr::opts_chunk$set(echo = TRUE)
library(kableExtra)



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 = c("line\nbreak", "line<br>break", "line&#013;break", "line&#10;break")))

kbl(popover_dt, escape = FALSE) %>%
  kable_paper("striped", full_width = FALSE)

```

enter image description here

Upvotes: 1

Ben
Ben

Reputation: 30539

Add html: true to your javascript:

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({html: true}); 
});
</script>

Then <br/> should provide a line break.

Upvotes: 4

Related Questions