/
tooltip_popover.Rmd
42 lines (31 loc) · 1.65 KB
/
tooltip_popover.Rmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
---
title: "Tooltips and popovers"
author: "Ian Lyttle"
date: "`r Sys.Date()`"
output: rmarkdown::html_vignette
---
```{r}
library("htmltools")
library("bsplus")
```
Tooltips and popovers are used to add additional content, like short notes. They can be useful for short help-documentation. A tooltip is used to embed a short note into a tag; by default they are activated by hovering over the tag. A popover is used to embed a longer note into a tag; by default they are activated by clicking on the tag. A tooltip has only a text `title`; a popover has a `title`, which is generally text, and `content`, which can be HTML.
```{r}
bs_button("Hover for tooltip") %>%
bs_embed_tooltip(title = "I'm a tooltip")
```
```{r}
bs_button("Click for popover") %>%
bs_embed_popover(title = "I'm a popover", content = "Really!")
```
Both of these functions have an additional argument, `placement`, which defaults to `"top"`, following the Bootstrap default. The possible values are `c("top", "bottom", "left", "right", "auto")`.
```{r}
bs_button("Another tooltip") %>%
bs_embed_tooltip(title = "I'm on the right", placement = "right")
```
Tooltips and popovers are not activted by default in Bootstrap. For either of them to work properly, you will have to activate them on your page, using the `use_bs_tooltip()` or `use_bs_popover()` functions. For each page you write, you will need to call each function once, at most.
```{r}
use_bs_tooltip()
use_bs_popover()
```
## Reference
For more information, please see the Bootstrap JavaScript page on [tooltips](http://getbootstrap.com/docs/3.3/javascript/#tooltips) or [popovers](http://getbootstrap.com/docs/3.3/javascript/#popovers).