starred/BoostNote-App

Fork 0

mirror of https://github.com/BoostIO/BoostNote-App.git synced 2026-04-26 21:05:55 +03:00

[PR #810] [CLOSED] Add Tooltip component #919

New issue

Closed

opened 2026-03-03 00:23:47 +03:00 by kerem · 0 comments

kerem commented

2026-03-03 00:23:47 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/BoostIO/BoostNote-App/pull/810
Author: @Komediruzecki
Created: 2/23/2021
Status: ❌ Closed

Base: master ← Head: feature/improve-tooltip-handling

📝 Commits (1)

a2881c7 Add Tooltip component

📊 Changes

13 files changed (+312 additions, -47 deletions)

View changed files

📝 src/components/atoms/BottomBarButton.tsx (+8 -3)
➕ src/components/atoms/GeneralPortal.tsx (+31 -0)
📝 src/components/atoms/NavigatorButton.tsx (+10 -8)
📝 src/components/atoms/ToolbarButton.tsx (+12 -10)
📝 src/components/atoms/ToolbarIconButton.tsx (+12 -10)
➕ src/components/atoms/Tooltip.tsx (+189 -0)
📝 src/components/molecules/EditorIndentationStatus.tsx (+6 -1)
📝 src/components/molecules/EditorKeyMapSelect.tsx (+6 -1)
📝 src/components/molecules/EditorThemeSelect.tsx (+6 -1)
📝 src/components/molecules/FolderNavigatorItem.tsx (+3 -2)
📝 src/components/molecules/NotePageToolbarNoteHeader.tsx (+16 -11)
📝 src/components/organisms/NotePageToolbar.tsx (+2 -0)
📝 src/locales/enUS.ts (+11 -0)

📄 Description

Add Tooltip component (#552)

Add tooltip component
Add basic portal component for tooltip
Add tooltip component in navigator buttons
Add tooltip for button components
Add translation for button tooltip texts
Add tooltip delay
Show tooltip arrow on edges at the correct location
Fix tooltip arrow center position issue

Few examples of how it looks:

I left the coloring and styling to whoever can make it work and used tooltip background color available in the theme.
In this (blackish) color arrow is sometimes not seen so clearly and on a dark background, it would also be a bit harder to spot. Meaning separate colors for each theme (black/white/sepia) could be used, an example of that would be something like this:

The non-transparent color would also help I think.

Tested in

Local dev
Production AppImage (Linux)

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/BoostIO/BoostNote-App/pull/810 **Author:** [@Komediruzecki](https://github.com/Komediruzecki) **Created:** 2/23/2021 **Status:** ❌ Closed **Base:** `master` ← **Head:** `feature/improve-tooltip-handling` --- ### 📝 Commits (1) - [`a2881c7`](https://github.com/BoostIO/BoostNote-App/commit/a2881c74f92051e57f240aec61c2eee3859c6d7d) Add Tooltip component ### 📊 Changes **13 files changed** (+312 additions, -47 deletions) <details> <summary>View changed files</summary> 📝 `src/components/atoms/BottomBarButton.tsx` (+8 -3) ➕ `src/components/atoms/GeneralPortal.tsx` (+31 -0) 📝 `src/components/atoms/NavigatorButton.tsx` (+10 -8) 📝 `src/components/atoms/ToolbarButton.tsx` (+12 -10) 📝 `src/components/atoms/ToolbarIconButton.tsx` (+12 -10) ➕ `src/components/atoms/Tooltip.tsx` (+189 -0) 📝 `src/components/molecules/EditorIndentationStatus.tsx` (+6 -1) 📝 `src/components/molecules/EditorKeyMapSelect.tsx` (+6 -1) 📝 `src/components/molecules/EditorThemeSelect.tsx` (+6 -1) 📝 `src/components/molecules/FolderNavigatorItem.tsx` (+3 -2) 📝 `src/components/molecules/NotePageToolbarNoteHeader.tsx` (+16 -11) 📝 `src/components/organisms/NotePageToolbar.tsx` (+2 -0) 📝 `src/locales/enUS.ts` (+11 -0) </details> ### 📄 Description **Add Tooltip component** (#552) - Add tooltip component - Add basic portal component for tooltip - Add tooltip component in navigator buttons - Add tooltip for button components - Add translation for button tooltip texts - Add tooltip delay - Show tooltip arrow on edges at the correct location - Fix tooltip arrow center position issue Few examples of how it looks: ![TooltipWorkspaceNewNoteButton](https://user-images.githubusercontent.com/18196945/108909853-61b43680-7625-11eb-871a-231acd30d92d.png) ![TooltipOpenContextView](https://user-images.githubusercontent.com/18196945/108909859-64169080-7625-11eb-8c31-a7a2b1ef1237.png) ![TooltipPathTooltip](https://user-images.githubusercontent.com/18196945/108909881-6aa50800-7625-11eb-8803-16b8de2230ab.png) ![TooltipAddLabelSolarizedDark](https://user-images.githubusercontent.com/18196945/108909914-7395d980-7625-11eb-885b-e289a58e3078.png) ![TooltipEditTitleSolarizedDark](https://user-images.githubusercontent.com/18196945/108909968-84464f80-7625-11eb-9fb9-e0cb148f441e.png) ![TooltipIndentOptionsBottomBar](https://user-images.githubusercontent.com/18196945/108909988-88726d00-7625-11eb-8c6a-12b346734868.png) I left the coloring and styling to whoever can make it work and used tooltip background color available in the theme. In this (blackish) color arrow is sometimes not seen so clearly and on a dark background, it would also be a bit harder to spot. Meaning separate colors for each theme (black/white/sepia) could be used, an example of that would be something like this: ![TooltipNavigateToFolder](https://user-images.githubusercontent.com/18196945/108910202-d25b5300-7625-11eb-9939-1342ef054634.png) ![TooltipShowMdPreviewSepia](https://user-images.githubusercontent.com/18196945/108910219-d7200700-7625-11eb-86cc-22b352eae6bd.png) The non-transparent color would also help I think. **Tested in** - Local dev - Production AppImage (Linux) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

kerem

2026-03-03 00:23:47 +03:00

closed this issue
added the
pull-request
label

kerem referenced this issue

2026-03-03 00:24:10 +03:00

[PR #919] [MERGED] UI: Adjusted Alignments of the Sidebar Buttons #1000

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/BoostNote-App#919

No description provided.

Rows
Columns