Add tooltip to truncated bookmark titles (#607)

* Add title to link so you can see the entire title when hover

* Tweak JS, styles

* Fix snapshot tests

---------

Co-authored-by: Sascha Ißbrücker <sascha.issbruecker@gmail.com>

bookmarks/frontend/behaviors/bookmark-page.js

@@ -59,10 +59,18 @@ class BookmarkItem {
   constructor(element) {
     this.element = element;
 
+    // Toggle notes
     const notesToggle = element.querySelector(".toggle-notes");
     if (notesToggle) {
       notesToggle.addEventListener("click", this.onToggleNotes.bind(this));
     }
+
+    // Add tooltip to title if it is truncated
+    const titleAnchor = element.querySelector(".title > a");
+    const titleSpan = titleAnchor.querySelector("span");
+    if (titleSpan.offsetWidth > titleAnchor.offsetWidth) {
+      titleAnchor.dataset.tooltip = titleSpan.textContent;
+    }
   }
 
   onToggleNotes(event) {

bookmarks/styles/bookmark-page.scss

@@ -107,6 +107,18 @@ ul.bookmark-list {
   padding: 0;
 }
 
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+  90% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 /* Bookmarks */
 li[ld-bookmark-item] {
   position: relative;
@@ -122,6 +134,27 @@ li[ld-bookmark-item] {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+
+    &[data-tooltip]:hover::after, &[data-tooltip]:focus::after {
+      content: attr(data-tooltip);
+      position: absolute;
+      z-index: 10;
+      top: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: max-content;
+      max-width: 100%;
+      height: fit-content;
+      background-color: #292f62;
+      color: #fff;
+      padding: $unit-1;
+      border-radius: $border-radius;
+      border: 1px solid #424a8c;
+      font-size: $font-size-sm;
+      font-style: normal;
+      white-space: normal;
+      animation: 0.3s ease 0s appear;
+    }
   }
 
   &.unread .title a {

bookmarks/templates/bookmarks/bookmark_list.html

@@ -14,11 +14,11 @@
           <i class="form-icon"></i>
         </label>
         <div class="title">
-          <a href="{{ bookmark_item.url }}" target="{{ bookmark_list.link_target }}" rel="noopener">
+          <a href="{{ bookmark_item.url }}" target="{{ bookmark_list.link_target }}" rel="noopener" >
             {% if bookmark_item.favicon_file and bookmark_list.show_favicons %}
               <img src="{% static bookmark_item.favicon_file %}" alt="">
             {% endif %}
-            {{ bookmark_item.title }}
+              <span>{{ bookmark_item.title }}</span>
           </a>
         </div>
         {% if bookmark_list.show_url %}

bookmarks/tests/test_bookmarks_list_template.py

@@ -24,7 +24,7 @@ class BookmarkListTemplateTest(TestCase, BookmarkFactoryMixin):
                 target="{link_target}" 
                 rel="noopener">
                 {favicon_img}
-                {bookmark.resolved_title}
+                <span>{bookmark.resolved_title}</span>
             </a>
             ''',
             html