diff --git a/src/public/app/services/note_tooltip.js b/src/public/app/services/note_tooltip.js
index 5c90419c2..f8451c987 100644
--- a/src/public/app/services/note_tooltip.js
+++ b/src/public/app/services/note_tooltip.js
@@ -88,7 +88,7 @@ async function renderTooltip(note) {
return;
}
- let content = $("
").text(await treeService.getNotePathTitle(someNotePath)).prop('outerHTML');
+ let content = '';
const {$renderedAttributes} = await attributeRenderer.renderNormalAttributes(note);
@@ -98,7 +98,7 @@ async function renderTooltip(note) {
});
content = content
- + $renderedAttributes[0].outerHTML
+ + '
' + $renderedAttributes[0].outerHTML + '
'
+ $renderedContent[0].outerHTML;
return content;
diff --git a/src/public/app/services/tree.js b/src/public/app/services/tree.js
index d29e2ee8a..68129ba73 100644
--- a/src/public/app/services/tree.js
+++ b/src/public/app/services/tree.js
@@ -236,10 +236,8 @@ async function getNoteTitle(noteId, parentNoteId = null) {
return title;
}
-async function getNotePathTitle(notePath) {
- utils.assertArguments(notePath);
-
- const titlePath = [];
+async function getNotePathTitleComponents(notePath) {
+ const titleComponents = [];
if (notePath.startsWith('root/')) {
notePath = notePath.substr(5);
@@ -247,20 +245,51 @@ async function getNotePathTitle(notePath) {
// special case when we want just root's title
if (notePath === 'root') {
- return await getNoteTitle(notePath);
+ titleComponents.push(await getNoteTitle(notePath));
+ } else {
+ let parentNoteId = 'root';
+
+ for (const noteId of notePath.split('/')) {
+ titleComponents.push(await getNoteTitle(noteId, parentNoteId));
+
+ parentNoteId = noteId;
+ }
}
- let parentNoteId = 'root';
+ return titleComponents;
+}
- for (const noteId of notePath.split('/')) {
- titlePath.push(await getNoteTitle(noteId, parentNoteId));
+async function getNotePathTitle(notePath) {
+ utils.assertArguments(notePath);
- parentNoteId = noteId;
- }
+ const titlePath = await getNotePathTitleComponents(notePath);
return titlePath.join(' / ');
}
+async function getNoteTitleWithPathAsSuffix(notePath) {
+ utils.assertArguments(notePath);
+
+ const titleComponents = await getNotePathTitleComponents(notePath);
+
+ if (!titleComponents || titleComponents.length === 0) {
+ return "";
+ }
+
+ const title = titleComponents[titleComponents.length - 1];
+ const path = titleComponents.slice(0, titleComponents.length - 1);
+
+ const $titleWithPath = $('')
+ .append($('').text(title));
+
+ if (path.length > 0) {
+ $titleWithPath
+ .append($('').text(' (' + path.join(' / ') + ')'));
+ }
+
+ return $titleWithPath;
+}
+
function getHashValueFromAddress() {
const str = document.location.hash ? document.location.hash.substr(1) : ""; // strip initial #
@@ -289,6 +318,7 @@ export default {
getBranchIdFromNotePath,
getNoteTitle,
getNotePathTitle,
+ getNoteTitleWithPathAsSuffix,
getHashValueFromAddress,
parseNotePath
};
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 9a643d97b..0f4703da4 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -420,12 +420,30 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
margin-bottom: 7px;
}
+.note-tooltip-title {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
.note-tooltip-content {
/* height needs to stay small because tooltip has problem when it can't fit to either top or bottom of the cursor */
max-height: 300px;
overflow: hidden;
}
+.note-tooltip-content .note-title-with-path .note-path {
+ font-size: small;
+}
+
+.note-tooltip-attributes {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
.tooltip-inner img {
max-width: 250px;
max-height: 250px;