Merge pull request #2315 from MushroomObserver/fix-tooltip-display

More legible tooltips for all icons

app/helpers/link_helper.rb

@@ -81,16 +81,17 @@ def modal_link_to(identifier, name, path, args)
   # Icon link with optional active state. (Tooltip title must be swapped in JS.)
   # Now also accepts active state options: active_icon, active_content
   # NOTE: Takes same args as link_to, e.g. *edit_description_tab(desc, type)
-  # icon_link_to(text, path, **args)
+  # icon_link_to(text, path, **args). Can also print a button_to.
   def icon_link_to(text = nil, path = nil, options = {}, &block)
     return unless text
 
-    link = block ? text : path # because positional
+    link_path = block ? text : path # because positional
     content = block ? capture(&block) : text
     opts = block ? path : options # because positional
     icon_type = opts[:icon]
     return link_to(link, opts) { content } if icon_type.blank?
 
+    # method = opts[:button] ? :button_to : :link_to
     active_icon = opts[:active_icon]
     active_content = options[:active_content]
     stateful = active_icon && active_content
@@ -106,14 +107,19 @@ def icon_link_to(text = nil, path = nil, options = {}, &block)
       data: { toggle: "tooltip", title: content, # needed for swapping only
               active_title: opts[:active_content] }
     }.deep_merge(opts.except(:class, :icon, :icon_class, :show_text,
-                             :active_icon, :active_content))
+                             :active_icon, :active_content, :button_to))
 
-    link_to(link, **link_opts) do
+    html = capture do
       concat(link_icon(icon_type, class: icon_class))
       concat(link_icon(active_icon, class: icon_active_class)) if stateful
       concat(tag.span(content, class: label_class))
       concat(tag.span(active_content, class: label_active_class)) if stateful
     end
+    if opts[:button_to]
+      button_to(html, link_path, **link_opts)
+    else
+      link_to(html, link_path, **link_opts)
+    end
   end
 
   # NOTE: above re: MO tabs
@@ -137,11 +143,11 @@ def link_icon(type, **args)
 
     if args[:title].present?
       title = args[:title]
-      args[:data] = { toggle: "tooltip", title: }.merge(args[:data] || {})
+      args[:data] = { toggle: "tooltip" }.merge(args[:data] || {})
       text = tag.span(title, class: "sr-only")
     end
 
-    tag.span(text, **args.except(:title))
+    tag.span(text, **args)
   end
 
   # NOTE: Specific to glyphicons
@@ -156,6 +162,12 @@ def link_icon(type, **args)
     x: "remove",
     remove: "remove-circle",
     send: "send",
+    log_in: "log-in",
+    log_out: "log-out",
+    admin: "text-background",
+    inbox: "inbox",
+    interests: "bullhorn",
+    settings: "cog",
     ban: "ban-circle",
     plus: "plus-sign",
     minus: "minus-sign",

app/javascript/controllers/tooltip_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="tooltip"
+// BS3 tooltips are "opt-in", so they require on-page activation
+export default class extends Controller {
+
+  connect() {
+    this.element.dataset.stimulus = "tooltip-connected";
+    this.activateTooltips();
+  }
+
+  activateTooltips() {
+    $('[data-toggle="tooltip"]').tooltip()
+  }
+}

app/views/controllers/application/top_nav/_user_nav.html.erb

@@ -14,32 +14,24 @@
     </li>
   <% end %>
   <li>
-    <%= link_to(
-          "", comments_path(for_user: @user.id),
-          { class: "glyphicon glyphicon-inbox",
-            id: "user_nav_inbox_link",
-            title: :app_comments_for_you.t,
-            data: { toggle: "tooltip", placement: "bottom" } }
+    <%= icon_link_to(
+          :app_comments_for_you.l, comments_path(for_user: @user.id),
+          { icon: :inbox, id: "user_nav_inbox_link",
+            data: { placement: "bottom" } }
         ) %>
   </li>
   <li>
-    <%= link_to(
-          "",
-          interests_path,
-          { class: "glyphicon glyphicon-bullhorn",
-            id: "user_nav_interests_link",
-            title: :app_your_interests.t,
-            data: { toggle: "tooltip", placement: "bottom" } }
+    <%= icon_link_to(
+          :app_your_interests.l, interests_path,
+          { icon: :interests, id: "user_nav_interests_link",
+            data: { placement: "bottom" } }
         ) %>
   </li>
   <li>
-    <%= link_to(
-          "",
-          edit_account_preferences_path,
-          { class: "glyphicon glyphicon-cog",
-            id: "user_nav_preferences_link",
-            title: :app_preferences.t,
-            data: { toggle: "tooltip", placement: "bottom" } }
+    <%= icon_link_to(
+          :app_preferences.l, edit_account_preferences_path,
+          { icon: :settings, id: "user_nav_preferences_link",
+            data: { placement: "bottom" } }
         ) %>
   </li>
   <li id="user_drop_down" class="dropdown">
@@ -49,38 +41,33 @@
       <span class="caret"></span>
     </a>
     <ul class="dropdown-menu" role="menu">
-      <li><%= link_to(:app_your_observations.t,
+      <li><%= link_to(:app_your_observations.l,
                       observations_path(user: @user.id),
                       { class: "" } ) %></li>
-      <li><%= link_to(:app_your_projects.t,
-                      projects_path(member: @user.id),
+      <li><%= link_to(:app_your_projects.l, projects_path(member: @user.id),
                       { class: "", id: "user_drop_projects_link" }) %></li>
-      <li><%= link_to(:app_your_lists.t,
-                      species_lists_path(by_user: @user.id),
-                      { class: "", id: "user_drop_species_lists_link" } ) %></li>
-      <li><%= link_to(:app_your_interests.t,
-                      interests_path,
+      <li><%= link_to(:app_your_lists.l, species_lists_path(by_user: @user.id),
+                      { class: "",
+                        id: "user_drop_species_lists_link" } ) %></li>
+      <li><%= link_to(:app_your_interests.l, interests_path,
                       { class: "", id: "user_drop_interests_link" }) %></li>
-      <li><%= link_to(:app_your_summary.t,
-                      user_path(@user.id),
+      <li><%= link_to(:app_your_summary.l, user_path(@user.id),
                       { class: "", id: "user_drop_profile_link" }) %></li>
-      <li><%= link_to(:app_preferences.t,
-                      edit_account_preferences_path,
+      <li><%= link_to(:app_preferences.l, edit_account_preferences_path,
                       { class: "", id: "user_drop_preferences_link" }) %></li>
       <li class="divider"></li>
       <li><%= button_to(
-                :app_logout.t,
+                :app_logout.l,
                 account_logout_path,
                 { class: "btn btn-link", id: "user_drop_logout_link" }
               ) %><li>
     </ul>
   </li>
-  <li><%= button_to(
-            account_logout_path,
-            { class: "btn btn-link navbar-btn",
-              id: "user_nav_logout_link",
-              title: :app_logout.t }
-          ) do
-            tag.span("", class: "glyphicon glyphicon-log-out")
-          end %></li>
+  <li>
+    <%= icon_link_to(
+          :app_logout.l, account_logout_path,
+          { icon: :log_out, id: "user_nav_logout_link", button_to: true,
+            class: "btn btn-link navbar-btn", data: { placement: "bottom" } }
+        ) %>
+  </li>
 </ul>

app/views/controllers/layouts/application.html.erb

@@ -14,7 +14,7 @@ body_class = class_names(ctrlr_action, theme, location_format, logged_in)
   <%= render(partial: "application/app/head") %>
 </head>
 
-<body class="<%= body_class %>" data-controller="lazyload">
+<body class="<%= body_class %>" data-controller="lazyload tooltip">
   <% if Rails.env == "production" %>
     <%= render(partial: "application/app/gtm_iframe") %>
   <% end %>