Use classes and proper data attributes for tooltips, closes #1899

assets/css/print-cheatsheet.css

@@ -130,7 +130,7 @@
   }
 
   /* Remove hover tooltip from inline code references */
-  .page-cheatmd .content-inner div#tooltip {
+  .page-cheatmd .content-inner div.tooltip {
     display: none;
   }
 

assets/css/tooltips.css

@@ -1,4 +1,4 @@
-#tooltip {
+.tooltip {
   box-shadow: 0 0 10px var(--black-opacity-10);
   max-height: 300px;
   max-width: 500px;
@@ -21,41 +21,41 @@ Show-up animation
 Note: it's fine to hide the tooltip with `visibility: hidden` (rather than `display: none`)
 as it has absolute positioning, so doesn't impact the layout and click events pass through.
 */
-#tooltip.tooltip-shown {
+.tooltip.tooltip-shown {
   visibility: visible;
   transform: translateY(0);
   opacity: 1;
 }
 
-#tooltip .tooltip-body {
+.tooltip .tooltip-body {
   border: 1px solid var(--codeBorder);
 }
 
-#tooltip .tooltip-body .signature {
+.tooltip .tooltip-body .signature {
   min-width: 320px;
   width: 100%;
 }
 
-#tooltip .tooltip-body .detail-header {
+.tooltip .tooltip-body .detail-header {
   border-left: 0;
   margin-bottom: 0;
   margin-top: 0;
 }
 
-#tooltip .tooltip-body .docstring {
+.tooltip .tooltip-body .docstring {
   background-color: var(--background);
   padding: 1.2em;
   margin: 0;
   width: 498px; /* Taking 2 * 1px of border into account */
 }
 
 /* Used for simple tooltips having only description. */
-#tooltip .tooltip-body .docstring-plain {
+.tooltip .tooltip-body .docstring-plain {
   max-width: 498px;
   width: auto;
 }
 
-#tooltip .tooltip-body .version-info {
+.tooltip .tooltip-body .version-info {
   float: right;
   line-height: 1.6rem;
   font-family: var(--monoFontFamily);

assets/js/handlebars/templates/tooltip-layout.handlebars

@@ -1,3 +1,3 @@
-<div id="tooltip">
+<div class="tooltip">
   <div class="tooltip-body"></div>
 </div>

assets/js/tooltips/tooltips.js

@@ -5,9 +5,9 @@ import { cancelHintFetchingIfAny, getHint, HINT_KIND, isValidHintHref } from './
 // Elements that can activate the tooltip.
 const TOOLTIP_ACTIVATORS_SELECTOR = '.content a'
 // Tooltip root element.
-const TOOLTIP_SELECTOR = '#tooltip'
+const TOOLTIP_SELECTOR = '.tooltip'
 // Tooltip content element.
-const TOOLTIP_BODY_SELECTOR = '#tooltip .tooltip-body'
+const TOOLTIP_BODY_SELECTOR = '.tooltip .tooltip-body'
 // Element containing the documentation text.
 const CONTENT_INNER_SELECTOR = 'body .content-inner'
 
@@ -65,7 +65,7 @@ function addEventListeners () {
  */
 function linkElementEligibleForTooltip (linkElement) {
   // Skip tooltips on the permalink icon (the on-hover one next to the function name).
-  if (linkElement.classList.contains('detail-link')) { return false }
+  if (linkElement.getAttribute('data-no-tooltip') !== null) { return false }
 
   // Skip link to the module page we are already on.
   if (isHrefToSelf(linkElement.href)) { return false }

lib/ex_doc/formatter/html/templates/detail_template.eex

@@ -3,7 +3,7 @@
     <span id="<%=enc "#{default_name}/#{default_arity}" %>"></span>
   <% end %>
   <div class="detail-header">
-    <a href="#<%=enc node.id %>" class="detail-link" title="Link to this <%= pretty_type(node) %>">
+    <a href="#<%=enc node.id %>" class="detail-link" data-no-tooltip title="Link to this <%= pretty_type(node) %>">
       <i class="ri-link-m" aria-hidden="true"></i>
       <span class="sr-only">Link to this <%= pretty_type(node) %></span>
     </a>

lib/ex_doc/formatter/html/templates/summary_template.eex

@@ -5,7 +5,7 @@
   <%= for node <- nodes do %>
     <div class="summary-row">
       <div class="summary-signature">
-        <a href="#<%=enc node.id %>" translate="no"><%=h node.signature %></a>
+        <a href="#<%=enc node.id %>" data-no-tooltip translate="no"><%=h node.signature %></a>
         <%= if deprecated = node.deprecated do %>
           <span class="deprecated" title="<%= h(deprecated) %>">deprecated</span>
         <% end %>

test/ex_doc/formatter/epub/templates_test.exs

@@ -145,7 +145,7 @@ defmodule ExDoc.Formatter.EPUB.TemplatesTest do
       content = get_module_page([CompiledWithDocs])
 
       assert content =~
-               ~r{<div class="summary-signature">\s*<a href="#example_1/0" translate="no">}
+               ~r{<div class="summary-signature">\s*<a href="#example_1/0" data-no-tooltip translate="no">}
     end
 
     test "contains links to summary sections when those exist" do

test/ex_doc/formatter/html/templates_test.exs

@@ -501,7 +501,7 @@ defmodule ExDoc.Formatter.HTML.TemplatesTest do
       assert content =~ ~s{example(foo, bar \\\\ Baz)}
 
       assert content =~
-               ~r{<a href="#example/2" class="detail-link" title="Link to this function">\s*<i class="ri-link-m" aria-hidden="true"></i>\s*<span class="sr-only">Link to this function</span>\s*</a>}ms
+               ~r{<a href="#example/2" class="detail-link" data-no-tooltip title="Link to this function">\s*<i class="ri-link-m" aria-hidden="true"></i>\s*<span class="sr-only">Link to this function</span>\s*</a>}ms
     end
 
     test "outputs function groups", context do
@@ -542,7 +542,7 @@ defmodule ExDoc.Formatter.HTML.TemplatesTest do
           ~S[<a href="TypesAndSpecs.Sub.html#t:t/0">TypesAndSpecs.Sub.t</a>(), ] <>
           ~S[<a href="#t:opaque/0">opaque</a>(), :ok | :error}]
 
-      assert content =~ ~s[<a href="#t:public/1" translate="no">public(t)</a>]
+      assert content =~ ~s[<a href="#t:public/1" data-no-tooltip translate="no">public(t)</a>]
       refute content =~ ~s[<a href="#t:private/0">private</a>]
       assert content =~ public_html
       refute content =~ ~s[<strong>private\(t\)]
@@ -561,7 +561,7 @@ defmodule ExDoc.Formatter.HTML.TemplatesTest do
       content = get_module_page([CompiledWithDocs], context)
 
       assert content =~
-               ~r{<div class="summary-signature">\s*<a href="#example_1/0" translate="no">}
+               ~r{<div class="summary-signature">\s*<a href="#example_1/0" data-no-tooltip translate="no">}
     end
 
     test "contains links to summary sections when those exist", context do