How can I add a tooltip to an inline word in RMarkdown?

Viewed 579

I want to use the package tippy to add a tooltip over a in-line word on my RMarkdown document. However, the solution provided on this answer breaks the desired word into a new paragraph:

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(tippy)
```

This is a 
```{r echo = FALSE}
tippy("word.", tooltip = "Definition of word that pops up in a box upon hovering")
```
I would like to know its definition.

This is a `r tippy("word.", tooltip = "Definition of word that pops up in a box upon hovering")`
I would like to know its definition.

The result looks like this. Both the chunk and in-line code solutions do not work. The package documentation implies that the in-line solution should work. Any help is appreciated, thanks.

2 Answers

I managed to use tippy in "inline-mode" in one of my pkgdown articles. See the first two paragraphs here. Basically, you need to wrap your word into an inline container (in my case <u>) and give it an id. Then, use a separate chunk to reference the element by id and add a tooltip.

---
output: html_document
---

This is a <u id='word'>word</u> in a sentence

```{r, echo=FALSE}
tippy::tippy_this(elementId = "word", tooltip = "tooltip")
```

You'll need to make sure that the return value of tippy::tippy_this() is printed in the rmarkdown document. This means that tippy::tippy_this() needs to appear at the end of the code chunk and the chunk is set to results="markup", which is the default.

I'd be very interested in hearing if there is an easier solution to this but for the meantime, I'll be happy using this approach.

---
title: "Untitled"
author: "Daniel"
date: "4/6/2021"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(tippy)
```

This is a 
```{r echo = FALSE, results='asis'}
tippy("word.", tooltip = "Definition of word that pops up in a box upon hovering")
```

Notice the results='asis' which gave me your desired output, this is an HTML output file viewed in Firefox with my mouse.

enter image description here

Related