Tippy tooltips

You can add tooltips into R markdown with the Tippy R package which uses Tippy.js.

Tooltips

A tooltip is text that appears when you hover your mouse over an item such as text. Text with tooltips are signified by being underlined. Hover your cursor over the below text to see and example.

Text

Code

A tool tips needs 2 bits of “code”. The html code in the text and the R code to create the tippy tooltip.

Text and HTML

The first is the inline HTML code to denote which word has which tooltip. This is shown below where we flank our word (Text) with html elements. These elements:

• Underline our text <u><\u>
• Specify the tippy tooltip to use id='word'

<u id='word'>Text</u> 

NoteTooltip location

Tippy tooltips can be placed anywhere in a sentence like here or here.

Tooltips creation through R

The second bit of code is creating the tooltip. As this is R we create this in an R code block and set echo=FALSE so the code is not shown in the page.

```{r, echo=FALSE}
#Tippy tooltips
tippy::tippy_this(elementId = "word", 
                  tooltip = "This is the tooltip text",
                  arrow = TRUE, 
                  placement = "bottom")
```

The options of the function are:

• elementId: Element to add the tooltip to via its ID.
• tooltip: Text to include in the tooltip.
• arrow: Specifies if the tooltip will have an arrow pointing to the text the tooltip refers to.
• placement: Placement of the tooltip relative to the text the tooltip refers to.

Other options are available for tippy:tippy_this() based on Tippy.js props. For an example see how arrow= is used above compared to the Tippy.js arrow prop.

NoteR code location

The R code for creating the tippy tooltip

CSS

I would suggest adding the following to your styles_light.css and styles_dark.scss file to increase the text and box size of the tooltip.

.tippy-tooltip {
  font-size: 16px;
  padding: 3px 5px;
}

Multilpe instances

You can have multiple tooltips in one paragraph . You can even use the same tooltip multiple
times but you only need one tippy_this() call for each ID.

However, you must have each tippy_this() call needed for each .qmd page on each relevant page. I suggest having one code block with all required tippy_this() calls for the required page at the bottom of that page.

Markdown text for above:

You can have 
<u id='multiple'>multiple</u> 
tooltips in one 
<u id='paragraph'>paragraph</u> 
. You can even use the same tooltip 
<u id='multiple'>multiple</u>  
times but only needing one `tippy_this()` call for each ID.

However, you must have each `tippy_this()` call needed for each __.Rmd__ page on each relevant page.
I suggest having one code block with all required `tippy_this()` 
calls for the required page at the bottom of that page.

R code for above:

```{r, echo=FALSE}
#Tippy tooltips
tippy::tippy_this(elementId = "multiple", 
                  tooltip = "More than one",
                  arrow = TRUE, placement = "bottom")
tippy::tippy_this(elementId = "paragraph", 
                  tooltip = "a distinct section of a piece of writing",
                  arrow = TRUE, placement = "bottom")
```

Package install

See install instructions in the setup page.