[Bug]: tooltip class conflicts when use with Bootstrap
- Dominant language
- TypeScript
- Stars
- 12.3k
- Forks
- 1.6k
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug / 问题描述
Tooltip generated with the tooltip [plugin](https://github.com/antvis/G6/blob/3fc0701ff9d35ca1cb31e7e8793ae1674e9b53d3/packages/g6/src/plugins/tooltip.ts#L353) have the `.tooltip` class which collides with the Bootstrap tooltip [API](https://getbootstrap.com/docs/5.3/components/tooltips/). Is there a way to workaround this?
To provide more context, I am developing R bindings to your JS G6 library so people can use it in their [Quarto](https://quarto.org/docs/interactive/widgets/htmlwidgets.html) or [Shiny](https://shiny.posit.co/) applications: https://cynkra.github.io/g6R/articles/g6R.html. Unfortunately, the Shiny R package heavily relies on Bootstrap for application layout, and tooltip don't show in that specific context.
I've seen that in the `antvis/conponent` library one can add [prefixes](https://github.com/antvis/component/blob/105051aeaf7a339202c9825a7a9f6634dda06f9b/src/ui/tooltip/constant.ts#L1) to the class, but I don't find any exposed parameter in the G6 tooltip [plugin](https://g6.antv.antgroup.com/manual/plugin/build-in/tooltip).
Is there a way to workaround this?
### Reproduction link / 复现链接
_No response_
### Steps to Reproduce the Bug or Issue / 重现步骤
This can only be reproduced from an R environment:
## Installation
You can install the development version of `{g6R}` from [GitHub](https://github.com/) with:
``` r
# install.packages("pak")
pak::pak("cynkra/g6R")
```
## Example
To create a `g6` graph inside a Shiny app context with Bootstrap 5.3 where tooltip don't work:
```r
library(shiny)
library(bslib)
library(g6R)
nodes <- data.frame(
id = as.character(1:10),
label = as.character(1:10)
)
# Generate random edges
edges <- data.frame(
source = c("2", "6", "7"),
target = c("1", "3", "9")
)
ui <- page_fluid(
g6_output("graph")
)
server <- function(input, output, session) {
output$graph <- render_g6({
g6(nodes, edges) |>
g6_layout(d3_force_layout()) |>
g6_plugins(
"minimap",
"tooltip"
)
})
}
shinyApp(ui, server)
```
In the isolate graph (outside Shiny and without Bootstrap) no problem:
```r
g6(nodes, edges) |>
g6_layout(d3_force_layout()) |>
g6_plugins(
"minimap",
"tooltip"
)
```
### Version / 版本
🆕 5.x
### OS / 操作系统
- [x] macOS
- [ ] Windows
- [ ] Linux
- [ ] Others / 其他
### Browser / 浏览器
- [x] Chrome
- [ ] Edge
- [ ] Firefox
- [ ] Safari (Limited support / 有限支持)
- [ ] IE (Nonsupport / 不支持)
- [ ] Others / 其他
Contributor guide
No contributing guide indexed for this repository
Research direction
Start in packages/g6/src/plugins/tooltip.ts around the tooltip generation linked in the issue, then review the G6 tooltip plugin documentation and the Bootstrap 5.3 reproduction. Verify the behavior in the provided Shiny example; done means G6 tooltips work without conflicting with Bootstrap's .tooltip class.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- bootstrap, typescript
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100