如何更改由tags$i生成的悬停文本的样式？

huangapple
go评论114阅读模式
英文:

How to change the style of the hover text generated by tags$i?

问题

我正在寻找一种改变由 tags$i 生成的悬停文本（如字体、背景颜色等）布局的方法。样式参数仅适用于生成的图标，而不适用于悬停时出现的标题。我发现使用 shinyBS 有几种选项，但不幸的是，我受限于使用 tags$i。

这里有一个小例子：

  1. library(shiny)
  3. shinyApp(
  4.   ui = fluidPage(
  5.     selectInput("Input", 
  6.                 label = tags$span(
  7.                   "Input", 
  8.                   tags$i(
  9.                     class = "glyphicon glyphicon-info-sign",
  10.                     style = "color: black",
  11.                     title = "hover text"
  12.                   ),
  13.                 ),
  14.                 choices = c("a","b")),
  15.     ),
  16.   
  17.   server = function(input, output) {}
  18. )

希望这能帮助你。

英文:

I am looking for a way to change the layout (such as font, background colour, etc.) of the hover text ("title") generated by tags$i. The style argument applies only to the icon generated, not the title appearing upon hover. I found several options using shinyBS but, unfortunately, I am restricted to tags$i.

Here's a small example:

  1. library(shiny)
  3. shinyApp(
  4.   ui = fluidPage(
  5.     selectInput("Input", 
  6.                 label = tags$span(
  7.                   "Input", 
  8.                   tags$i(
  9.                     class = "glyphicon glyphicon-info-sign",
  10.                     style = "color: black",
  11.                     title = "hover text"
  12.                   ),
  13.                 ),
  14.                 choices = c("a","b")),
  15.     ),
  16.   
  17.   server = function(input, output) {}
  18. )

答案1

得分: 1

这是一种不使用shinyBS的可能性：将信息标志添加为单独的div，并分别添加相应的HTML和CSS。然后，您可以在悬停在信息标志上时完全自定义显示的文本。

  1. library(shiny)
  3. shinyApp(
  4.     ui = fluidPage(
  5.         tags$head(tags$style(
  6.             HTML(
  7.                 "
  8.       #info-sign {
  9.       margin-left:40px;
  10.       margin-top:3px;
  11.       position: absolute;
  12.       }
  14.       #info-sign .text {
  15.       position:absolute;
  16.       bottom:-5px;
  17.       left:20px;
  18.       visibility:hidden;
  19.       font-weight:bolder;
  20.       }
  22.       #info-sign:hover .text {
  23.       visibility:visible;
  24.       color:red;
  25.       }
  26.             "
  27.             )
  28.         )),
  29.         
  30.         selectInput(
  31.             "Input",
  32.             label = tags$span("Input"),
  33.             choices = c("a", "b")
  34.         ),
  35.         
  36.         # HTML for the info sign
  37.         tags$div(
  38.             id = 'info-sign',
  39.             class = "glyphicon glyphicon-info-sign",
  40.             tags$span(class = "text", tags$p("formatted"))
  41.         )
  42.     ),
  43.     
  44.     server = function(input, output) {
  45.         
  46.     }
  47. )

如何更改由tags$i生成的悬停文本的样式？

英文:

Here is a possibility without using shinyBS: Add the info sign as a separate div and add the corresponding HTML and CSS separately. Then you can fully customise the displayed text when hovering the info sign.

如何更改由tags$i生成的悬停文本的样式？

  1. library(shiny)
  3. shinyApp(
  4.     ui = fluidPage(
  5.         tags$head(tags$style(
  6.             HTML(
  7.                 "
  8.       #info-sign {
  9.       margin-left:40px;
  10.       margin-top:3px;
  11.       position: absolute;
  12.       }
  14.       #info-sign .text {
  15.       position:absolute;
  16.       bottom:-5px;
  17.       left:20px;
  18.       visibility:hidden;
  19.       font-weight:bolder;
  20.       }
  22.       #info-sign:hover .text {
  23.       visibility:visible;
  24.       color:red;
  25.       }
  26.       "
  27.             )
  28.         )),
  29.         
  30.         selectInput(
  31.             "Input",
  32.             label = tags$span("Input"),
  33.             choices = c("a", "b")
  34.         ),
  35.         
  36.         # HTML for the info sign
  37.         tags$div(
  38.             id = 'info-sign',
  39.             class = "glyphicon glyphicon-info-sign",
  40.             tags$span(class = "text", tags$p("formatted"))
  41.         )
  42.     ),
  43.     
  44.     server = function(input, output) {
  45.         
  46.     }
  47. )

huangapple
  • 本文由 发表于 2023年7月13日 20:05:44
  • 转载请务必保留本文链接：https://go.coder-hub.com/76679188.html
  • css
  • html
  • r
  • shiny
  • shinyapps
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定