antvis / antvis/G6

[Bug]: tooltip class conflicts when use with Bootstrap

Open
#7,153 0 comments 1 reaction 0 assignees View on GitHub
feature 💡
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.