refactor: remove title attributes and reposition social tooltips

- Remove `title` attributes from all like/favorite buttons in EJS templates
- Update `.social-tooltip` CSS to position tooltips below elements instead of above
- Adjust tooltip positioning logic to use `top` and `left: 0` instead of `bottom` and `left: 50%`

public/css/app.css

@@ -779,9 +779,8 @@ a.detail-creator-card:hover {
 .social-tooltip {
   position: absolute;
   z-index: 800;
-  bottom: calc(100% + 6px);
+  top: calc(100% + 6px);
-  left: 50%;
+  left: 0;
-  transform: translateX(-50%);
   min-width: 120px;
   max-width: 220px;
   padding: 0.45rem 0.65rem;

src/views/partials/player.ejs

@@ -11,12 +11,12 @@
   <div class="player-queue">
     <span id="player-queue-info" class="muted"></span>
     <button id="player-like" type="button"
-      class="btn-social" title="Like"
+      class="btn-social"
       data-social-action="like" data-social-type="song" data-social-id=""
       <% if (!user) { %>data-require-login<% } %>
       aria-pressed="false" disabled>👍 <span class="social-count">0</span></button>
     <button id="player-favorite" type="button"
-      class="btn-social" title="Favorite"
+      class="btn-social"
       data-social-action="favorite" data-social-type="song" data-social-id=""
       <% if (!user) { %>data-require-login<% } %>
       aria-pressed="false" disabled>⭐ <span class="social-count">0</span></button>

src/views/partials/song_list.ejs

@@ -33,13 +33,13 @@
           data-social-action="like" data-social-type="song" data-social-id="<%= s.id %>"
           <% if (!user) { %>data-require-login<% } %>
           aria-pressed="<%= s.userLiked ? 'true' : 'false' %>"
-          title="Like">👍 <span class="social-count"><%= s.likeCount || 0 %></span></button>
+         >👍 <span class="social-count"><%= s.likeCount || 0 %></span></button>
         <button type="button"
           class="btn-social<%= s.userFavorited ? ' active' : '' %>"
           data-social-action="favorite" data-social-type="song" data-social-id="<%= s.id %>"
           <% if (!user) { %>data-require-login<% } %>
           aria-pressed="<%= s.userFavorited ? 'true' : 'false' %>"
-          title="Favorite">⭐ <span class="social-count"><%= s.favoriteCount || 0 %></span></button>
+         >⭐ <span class="social-count"><%= s.favoriteCount || 0 %></span></button>
       </div>
       <button type="button" class="btn-play"
         data-play-song="<%= JSON.stringify({ id: s.id, title: s.title, artist: s.artist, cover: s.coverPath ? '/media/' + s.coverPath : null, userLiked: !!s.userLiked, userFavorited: !!s.userFavorited, likeCount: s.likeCount || 0, favoriteCount: s.favoriteCount || 0 }) %>">

src/views/public/home.ejs

@@ -31,13 +31,13 @@
                 data-social-action="like" data-social-type="playlist" data-social-id="<%= p.id %>"
                 <% if (!user) { %>data-require-login<% } %>
                 aria-pressed="<%= p.userLiked ? 'true' : 'false' %>"
-                title="Like">👍 <span class="social-count"><%= p.likeCount || 0 %></span></button>
+               >👍 <span class="social-count"><%= p.likeCount || 0 %></span></button>
               <button type="button"
                 class="btn-social<%= p.userFavorited ? ' active' : '' %>"
                 data-social-action="favorite" data-social-type="playlist" data-social-id="<%= p.id %>"
                 <% if (!user) { %>data-require-login<% } %>
                 aria-pressed="<%= p.userFavorited ? 'true' : 'false' %>"
-                title="Favorite">⭐ <span class="social-count"><%= p.favoriteCount || 0 %></span></button>
+               >⭐ <span class="social-count"><%= p.favoriteCount || 0 %></span></button>
             </div>
           </div>
           </div>

src/views/public/playlist.ejs

@@ -17,13 +17,13 @@
           data-social-action="like" data-social-type="playlist" data-social-id="<%= playlist.id %>"
           <% if (!user) { %>data-require-login<% } %>
           aria-pressed="<%= playlist.userLiked ? 'true' : 'false' %>"
-          title="Like">👍 <span class="social-count"><%= playlist.likeCount || 0 %></span></button>
+         >👍 <span class="social-count"><%= playlist.likeCount || 0 %></span></button>
         <button type="button"
           class="btn-social<%= playlist.userFavorited ? ' active' : '' %>"
           data-social-action="favorite" data-social-type="playlist" data-social-id="<%= playlist.id %>"
           <% if (!user) { %>data-require-login<% } %>
           aria-pressed="<%= playlist.userFavorited ? 'true' : 'false' %>"
-          title="Favorite">⭐ <span class="social-count"><%= playlist.favoriteCount || 0 %></span></button>
+         >⭐ <span class="social-count"><%= playlist.favoriteCount || 0 %></span></button>
       </div>
       <% const npMeta = JSON.stringify({ title: playlist.title, description: playlist.description || null, cover: playlist.coverPath ? '/media/' + playlist.coverPath : null, trackCount: tracks.length, creator: creator ? { displayName: creator.displayName, avatarPath: creator.avatarPath || null, slug: creator.slug || null } : null }); %>
       <div class="playlist-btn-row">

src/views/public/playlists.ejs

@@ -25,13 +25,13 @@
                 data-social-action="like" data-social-type="playlist" data-social-id="<%= p.id %>"
                 <% if (!user) { %>data-require-login<% } %>
                 aria-pressed="<%= p.userLiked ? 'true' : 'false' %>"
-                title="Like">👍 <span class="social-count"><%= p.likeCount || 0 %></span></button>
+               >👍 <span class="social-count"><%= p.likeCount || 0 %></span></button>
               <button type="button"
                 class="btn-social<%= p.userFavorited ? ' active' : '' %>"
                 data-social-action="favorite" data-social-type="playlist" data-social-id="<%= p.id %>"
                 <% if (!user) { %>data-require-login<% } %>
                 aria-pressed="<%= p.userFavorited ? 'true' : 'false' %>"
-                title="Favorite">⭐ <span class="social-count"><%= p.favoriteCount || 0 %></span></button>
+               >⭐ <span class="social-count"><%= p.favoriteCount || 0 %></span></button>
             </div>
           </div>
         </div>

src/views/public/profile.ejs

@@ -39,13 +39,13 @@
                   data-social-action="like" data-social-type="playlist" data-social-id="<%= p.id %>"
                   <% if (!user) { %>data-require-login<% } %>
                   aria-pressed="<%= p.userLiked ? 'true' : 'false' %>"
-                  title="Like">👍 <span class="social-count"><%= p.likeCount || 0 %></span></button>
+                 >👍 <span class="social-count"><%= p.likeCount || 0 %></span></button>
                 <button type="button"
                   class="btn-social<%= p.userFavorited ? ' active' : '' %>"
                   data-social-action="favorite" data-social-type="playlist" data-social-id="<%= p.id %>"
                   <% if (!user) { %>data-require-login<% } %>
                   aria-pressed="<%= p.userFavorited ? 'true' : 'false' %>"
-                  title="Favorite">⭐ <span class="social-count"><%= p.favoriteCount || 0 %></span></button>
+                 >⭐ <span class="social-count"><%= p.favoriteCount || 0 %></span></button>
               </div>
             </div>
           </div>
@@ -86,13 +86,13 @@
                   data-social-action="like" data-social-type="song" data-social-id="<%= s.id %>"
                   <% if (!user) { %>data-require-login<% } %>
                   aria-pressed="<%= s.userLiked ? 'true' : 'false' %>"
-                  title="Like">👍 <span class="social-count"><%= s.likeCount || 0 %></span></button>
+                 >👍 <span class="social-count"><%= s.likeCount || 0 %></span></button>
                 <button type="button"
                   class="btn-social<%= s.userFavorited ? ' active' : '' %>"
                   data-social-action="favorite" data-social-type="song" data-social-id="<%= s.id %>"
                   <% if (!user) { %>data-require-login<% } %>
                   aria-pressed="<%= s.userFavorited ? 'true' : 'false' %>"
-                  title="Favorite">⭐ <span class="social-count"><%= s.favoriteCount || 0 %></span></button>
+                 >⭐ <span class="social-count"><%= s.favoriteCount || 0 %></span></button>
               </div>
             </div>
           </div>
@@ -146,13 +146,13 @@
                   data-social-action="like" data-social-type="playlist" data-social-id="<%= p.id %>"
                   <% if (!user) { %>data-require-login<% } %>
                   aria-pressed="<%= p.userLiked ? 'true' : 'false' %>"
-                  title="Like">👍 <span class="social-count"><%= p.likeCount || 0 %></span></button>
+                 >👍 <span class="social-count"><%= p.likeCount || 0 %></span></button>
                 <button type="button"
                   class="btn-social<%= p.userFavorited ? ' active' : '' %>"
                   data-social-action="favorite" data-social-type="playlist" data-social-id="<%= p.id %>"
                   <% if (!user) { %>data-require-login<% } %>
                   aria-pressed="<%= p.userFavorited ? 'true' : 'false' %>"
-                  title="Favorite">⭐ <span class="social-count"><%= p.favoriteCount || 0 %></span></button>
+                 >⭐ <span class="social-count"><%= p.favoriteCount || 0 %></span></button>
               </div>
             </div>
           </div>

src/views/public/song.ejs

@@ -19,13 +19,13 @@
           data-social-action="like" data-social-type="song" data-social-id="<%= song.id %>"
           <% if (!user) { %>data-require-login<% } %>
           aria-pressed="<%= song.userLiked ? 'true' : 'false' %>"
-          title="Like">👍 <span class="social-count"><%= song.likeCount || 0 %></span></button>
+         >👍 <span class="social-count"><%= song.likeCount || 0 %></span></button>
         <button type="button"
           class="btn-social<%= song.userFavorited ? ' active' : '' %>"
           data-social-action="favorite" data-social-type="song" data-social-id="<%= song.id %>"
           <% if (!user) { %>data-require-login<% } %>
           aria-pressed="<%= song.userFavorited ? 'true' : 'false' %>"
-          title="Favorite">⭐ <span class="social-count"><%= song.favoriteCount || 0 %></span></button>
+         >⭐ <span class="social-count"><%= song.favoriteCount || 0 %></span></button>
       </div>
       <p class="muted small">
         <% if (song.genre) { %><%= song.genre %> · <% } %>