Tooltips for text in lists (#266)

electerious · Jun 20, 2021 · 533443a · 533443a
1 parent ad31819
commit 533443a
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ This release contains a refactored front-end that takes advantage of the GraphQL
 
 - Views and duration details: Click on a chart bar on the overview and insights page to see more details
 - Active visitors counter updates periodically without reloading the UI
+- Tooltips for text in lists (#266)
 
 ### Changed
 

diff --git a/src/ui/scripts/components/presentations/PresentationIconList.js b/src/ui/scripts/components/presentations/PresentationIconList.js
@@ -39,7 +39,7 @@ const UrlRow = (props) => {
 			}),
 			h('div', { className: 'flexList__column flexList__column--text-adjustment' },
 				h('span', {}, hostnameUrl),
-				h('span', { className: 'flexList__obscured' }, pathnameUrl),
+				h('span', { className: 'flexList__obscured', title: pathnameUrl }, pathnameUrl),
 			),
 		)
 	)
@@ -56,7 +56,7 @@ const TextRow = (props) => {
 				barWidth: props.barWidth,
 			}),
 			h('div', { className: 'flexList__column flexList__column--text-adjustment' },
-				h('span', { className: 'flexList__truncated' }, props.text),
+				h('span', { className: 'flexList__truncated', title: props.text }, props.text),
 			),
 		)
 	)

diff --git a/src/ui/scripts/components/presentations/PresentationList.js b/src/ui/scripts/components/presentations/PresentationList.js
@@ -17,7 +17,7 @@ const Row = (props) => {
 			...rootProps,
 		},
 			h('div', { className: 'flexList__column flexList__column--text-adjustment' },
-				h('span', { className: 'flexList__truncated' }, props.text),
+				h('span', { className: 'flexList__truncated', title: props.text }, props.text),
 			),
 		)
 	)