Content
View differences
Updated by Parimal Satyal over 3 years ago
**As a** user of OpenProject,
**I want to** get a helpful tooltip when I hover over icons/buttons
**so that** I can be more confident as to what clicking on them would accomplish before the fact, instead of having to guess and potentially be confused
### Problem
We are missing meaningful tooltips for users throughout parts of the application. Users would benefit if they could directly get more information by hovering on a button or an icon.
A full review of the application is necessary but until this is realisable at a later date, this feature will add tooltips to the most essential actions that currently don't have them.
### Acceptance criteria
* Add the following tooltips (in quotes below) to the specified buttons and icons
### Tooltip text
#### Main header
* Project select: "View all projects" _(em.yml: root -> label\_project\_view\_all)_
* Notification center icon: "To notification center" _(em.yml: root -> mail -> notification -> center)_
#### Notification Center
**Toolbar:**
* Unread toggle: "Unread" _(js-en.yml: root -> js -> notifications -> facets -> unread)_
* All toggle: "Show all" _(en.yml: root -> timelines -> outlines -> all)_
**Notification card:**
* Mark as read button: "Mark as read" _(js-en.yml: root -> js -> notifications -> center -> mark\_as\_read)_
#### Work package list
* Create button: "New work package" _(js-en.yml: root -> js -> work\_packages -> create -> title)_
* Include projects: "Include projects" _(js-en.yml: root -> js -> include\_projects -> toggle\_title)_
* Filter: "Filter work packages" _(en.yml: root -> timelines -> filter -> work\_package\_filters)_
* Table: "Show table view" (**new**)
* Card: "Show card view" _(**update** js-en.yml: root -> js -> button\_show\_cards)_
* Gantt: "Show Gantt view" (**new**)
* i icon: "Open details view" _(js-en.yml: root -> js -> button\_open\_details)_
* Fullscreen icon: "Open fullscreen view" _(js-en.yml: root -> js -> button\_open\_fullscreen)_
* three-dot more icon: "More actions" _(**update** en.yml: root -> more\_actions)_
#### Work package details/fullscreen view
* Back button: "Back" "Back to list view" _(js-en.yml: root -> js -> button\_back\_to\_list\_view)_
#### Team planner
**Sidebar**
* Team planner button: "Create new team planner" _(en.yml: root -> team\_planner -> label\_create\_new\_team\_planner)_
**Main view**
* Add existing: "Add existing work packages" (**new,** full version of "add existing")
**Toolbar**
* Include projects: "Include projects" _(js-en.yml: root -> js -> include\_projects -> toggle\_title)_
* three-dot more icon: "More actions" _(**update** en.yml: root -> more\_actions)_
**I want to** get a helpful tooltip when I hover over icons/buttons
**so that** I can be more confident as to what clicking on them would accomplish before the fact, instead of having to guess and potentially be confused
### Problem
We are missing meaningful tooltips for users throughout parts of the application. Users would benefit if they could directly get more information by hovering on a button or an icon.
A full review of the application is necessary but until this is realisable at a later date, this feature will add tooltips to the most essential actions that currently don't have them.
### Acceptance criteria
* Add the following tooltips (in quotes below) to the specified buttons and icons
### Tooltip text
#### Main header
* Project select: "View all projects" _(em.yml: root -> label\_project\_view\_all)_
* Notification center icon: "To notification center" _(em.yml: root -> mail -> notification -> center)_
#### Notification Center
**Toolbar:**
* Unread toggle: "Unread" _(js-en.yml: root -> js -> notifications -> facets -> unread)_
* All toggle: "Show all" _(en.yml: root -> timelines -> outlines -> all)_
**Notification card:**
* Mark as read button: "Mark as read" _(js-en.yml: root -> js -> notifications -> center -> mark\_as\_read)_
#### Work package list
* Create button: "New work package" _(js-en.yml: root -> js -> work\_packages -> create -> title)_
* Include projects: "Include projects" _(js-en.yml: root -> js -> include\_projects -> toggle\_title)_
* Filter: "Filter work packages" _(en.yml: root -> timelines -> filter -> work\_package\_filters)_
* Table: "Show table view" (**new**)
* Card: "Show card view" _(**update** js-en.yml: root -> js -> button\_show\_cards)_
* Gantt: "Show Gantt view" (**new**)
* i icon: "Open details view" _(js-en.yml: root -> js -> button\_open\_details)_
* Fullscreen icon: "Open fullscreen view" _(js-en.yml: root -> js -> button\_open\_fullscreen)_
* three-dot more icon: "More actions" _(**update** en.yml: root -> more\_actions)_
#### Work package details/fullscreen view
* Back button: "Back"
#### Team planner
**Sidebar**
* Team planner button: "Create new team planner" _(en.yml: root -> team\_planner -> label\_create\_new\_team\_planner)_
**Main view**
* Add existing: "Add existing work packages" (**new,** full version of "add existing")
**Toolbar**
* Include projects: "Include projects" _(js-en.yml: root -> js -> include\_projects -> toggle\_title)_
* three-dot more icon: "More actions" _(**update** en.yml: root -> more\_actions)_