R Shiny / tippy をカスタマイズする

2019.08.04

今日はShinyアプリの作り込みのうえでは欠かせないtooltipの一つであるtippyの紹介です。

単純な使い方などは検索すれば見つかると思いますのでここではtippyのフォントサイズの変更など表示のカスタマイズについて説明します。

以下にサンプル例を紹介します。

サンプルプログラムを貼り付けましたが基本的なコードは以下のブログと同じですので参照してください。

平均値の差の検定でグループ間の等分散を仮定しないウエルチ検定を適用するかどうかを選択するボタンの横の？マークを追加して
そこにマウスをホバーすると説明がでるというギミックを作っています。

こんな感じですね　f:id:okdata:20190817002356p:plain:w400

ではtippyに関する部分の説明です。

  • サンプルコード12−16行目でラジオボタンのラベル欄にクエッションマークの画像を設置しています。
    shinyのお約束通り、プログラムホルダーと同じ階層にwwwサブフォルダーを作ってそこに画像（.png）を入れてあります。
  • アイコンにホバーすると説明が現れます、その説明書きのサイズはサンプルコードの4行から9行目で設定していますので
    ここを変えれば色の変更やサイズの変更などが可能です。

なお、tippyの基本的な使い方は以下のような形で表示した文字列にtooltipを表示させますが、
tippy("Hover me!", tooltip = "Hi, I'm the tooltip!")

tippy_this()の関数を使うとIDが指定できますのでこの例のように画像にIDを振っておけばその画像にホバーしたときに
コメントを出すことが可能となります。

なお、コメントには改行br() やスペースHTML(' ')も挿入可能です。その場合はコメントを添付の要領でpasteで囲んで使ってください。

サンプルコード

library(shiny)
library(tippy)
ui <- fluidPage(
tags$head(
tags$style(HTML("
                 .tippy-tooltip {
                  font-size: 16px;
                  }
        "))),
radioButtons(inputId = "welch",
label = tagList(
span("Welch approximation ?", style="font-weight: bolder;"),
img(id="effectWelch_Tips", src="./question.png",
width="15px", height="15px", style="margin-top:-10px;")
),
choices = c("Unequal Variance (Welch)" = "1",
"Equal Variacne" = "0"),
selected = "0"
),
tippy_this(elementId ="effectWelch_Tips",
tooltip=paste("Yes: Apply Welch approximation.",
br(),
"No: equal variances are assumed."
),
placement="right"
),
br(), hr(),
tableOutput("result.T")
)
server <- function(input, output) {
# generate data
set.seed(12345)
x0 = rnorm(100 , 0, 1) # 平均0、SD=1の正規乱数を100個作成
y0 = rnorm(100 , 0, 10)
# output table
output$result.T  = renderTable({
res = wilcox.test(x0, y0, paired = FALSE, exact = as.logical(as.numeric(input$welch)))
tab = data.frame(res$statistic, res$p.value)
colnames(tab) = c("統計量","p値")
rownames(tab) = "Values"
return(tab)
}, digits = 6)
}
shinyApp(ui, server)