wagtail / wagtail/guide

Replace Bootstrap tooltips with popover HTML API

Open
#385 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Python
Stars
36
Forks
39
Avg merge
2d 5h
Merged PRs (30d)
3

Description

Our feedback form at the bottom of all pages uses Bootstrap tooltips to label the "smiley face" and "sad face" emojis.

We don’t use Bootstrap for anything else on the site. Let’s switch to the popover HTML API so we can display good-looking tooltips without having to load 20kb of JavaScript.

Backup plan: a CSS-only tooltip technique, such as using the attr function on an after pseudo element’s content

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the feedback form shown at the bottom of the linked guide pages and trace how its Bootstrap tooltips are initialized. Replace that behavior with the HTML Popover API, then verify both emoji labels display correctly and the site no longer needs Bootstrap’s tooltip JavaScript.

Written by the indexing model from the issue text.

Assessment

Tech stack
bootstrap, html
Domain
frontend
Issue type
Refactor
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.