Making comment tooltips mobile-friendly

Author: SteveWilkes

_includes/comments/new.html

@@ -5,7 +5,7 @@
         <input id="post-id" name="post_id" type="hidden" value="{{ slug }}" />
 
         <div id="comment-box">
-            <img id="avatar-preview" class="avatar light-border" data-role="user-avatar"
+            <img id="avatar-preview" class="avatar medium-border" data-role="user-avatar"
                  src="{{ site.baseurl }}/assets/images/comments/avatar-unknown.gif" alt="avatar" />
 
             <div id="comment-text">
@@ -21,15 +21,16 @@
 
             <input type="text" id="identity" name="identity" class="form-input"
                    placeholder="email/@twitter/github" value="" />
-            <span class="icon-wrapper" title="Identity is only used to generate an avatar. It is not submitted with the form.">
+            <span class="icon-wrapper has-tooltip" data-tooltip="Identity is only used to generate an avatar. It is not submitted with the form.">
                 {% include icons/info.html %}
             </span>
 
             <input id="comment-submit" type="submit" value="Add comment" />
 
             <div id="remember-me">
                 <input type="checkbox" id="remember" name="remember"><label for="remember">Remember me</label>
-                <span title="Stores your name and email in the browser so you don't have to fill out the form again. This does not set a cookie.">
+                <span class="has-tooltip" data-tooltip-pos="above-left"
+                      data-tooltip="Stores your name and email in the browser so you don't have to fill out the form again. Does not set a cookie.">
                     {% include icons/info.html %}
                 </span>
             </div>

_includes/featuredbox.html

@@ -2,21 +2,21 @@
 <article class="post post-featured has-image">
     <div class="post-inside">
         {% if post.featured_image %}
-        <a href="{{ post.url | absolute_url }}" class="post-thumbnail">
-            <img src="{{ post.featured_image | prepend: site.baseurl }}"
+        <a href="{{ post.url }}" class="post-thumbnail">
+            <img src="/{{ post.featured_image }}"
                  alt="{% if post.featured_image_alt %}{{ post.featured_image_alt }}{% else %}{{ post.title }}{% endif %}">
         </a>
         {% endif %}
         <header class="post-header">
             <h2 class="post-title">
-                <a href="{{ site.baseurl }}{{ post.url }}" rel="bookmark">{{ post.title }}</a>
+                <a href="{{ post.url }}" rel="bookmark">{{ post.title }}</a>
             </h2>
             <div class="post-meta">
                 <time class="published" datetime="{{ post.date | date: '%Y-%m-%d' }}">{{ post.date | date: '%B %-d, %Y' }}</time>
             </div><!-- .post-meta -->
             {% if post.tags.size > 0 %}
             <div class="post-tags">
-                {% for tag in post.tags %}<a href="{{ site.baseurl }}/tags/#{{ tag | cgi_encode }}" rel="tag">{{ tag }}</a>
+                {% for tag in post.tags %}<a href="/tags/#{{ tag | cgi_encode }}" rel="tag">{{ tag }}</a>
                 {% unless forloop.last %} {% endunless %}{% endfor %}
             </div>
             {% endif %}

_includes/postbox.html

@@ -1,14 +1,14 @@
 <article class="post">
     <header class="post-header">
         <h2 class="post-title">
-            <a href="{{ post.url | absolute_url }}" rel="bookmark">{{ post.title }}</a>
+            <a href="{{ post.url }}" rel="bookmark">{{ post.title }}</a>
         </h2>
     </header><!-- .post-header -->
     <div class="post-content">
         <p>{{ post.excerpt | strip_html }} </p>
         {% if post.tags.size > 0 %}
         <p class="post-tags">
-            {% for tag in post.tags %}<a href="{{ site.baseurl }}/tags/#{{ tag | cgi_encode }}" rel="tag">{{ tag }}</a>
+            {% for tag in post.tags %}<a href="/tags/#{{ tag | cgi_encode }}" rel="tag">{{ tag }}</a>
             {% unless forloop.last %} {% endunless %}{% endfor %}
         </p>
         {% endif %}

_includes/to-top-link.html

@@ -1 +1 @@
-<p class="tag-top"><a href="#page" class="button-small">Return to top </a></p>
+<p class="tag-top"><a href="#page" class="button-small">Back to top </a></p>

_posts/2020-05-01-readableexpressions-v3.md

@@ -30,20 +30,20 @@ Colourized with Visual Studio 2019's light theme colours!
 
 The options menu let you switch the theme - perhaps you prefer dark? (as I obviously do):
 
-![v3 dark theme]({{ site.post_images_dir }}{{ page.images_dir }}v3-dark.gif#light-border)
+![v3 dark theme]({{ site.post_images_dir }}{{ page.images_dir }}v3-dark.gif#medium-border)
 
 There's also various ways to customise the translation - maybe you'd prefer to declare out parameter 
 variable inline:
 
-![v3 out param declared inline]({{ site.post_images_dir }}{{ page.images_dir }}v3-dark-inline.gif#light-border)
+![v3 out param declared inline]({{ site.post_images_dir }}{{ page.images_dir }}v3-dark-inline.gif#medium-border)
 
 ...and perhaps you'd rather use the parameter type name, instead of `var`:
 
-![v3 out param declared with type name]({{ site.post_images_dir }}{{ page.images_dir }}v3-dark-inline-explicit.gif#light-border)
+![v3 out param declared with type name]({{ site.post_images_dir }}{{ page.images_dir }}v3-dark-inline-explicit.gif#medium-border)
 
 ...or be shown the type of the lambda's `ip` parameter:
 
-![v3 with lambda parameter type name]({{ site.post_images_dir }}{{ page.images_dir }}v3-dark-inline-explicit-lambda-param.gif#light-border)
+![v3 with lambda parameter type name]({{ site.post_images_dir }}{{ page.images_dir }}v3-dark-inline-explicit-lambda-param.gif#medium-border)
 
 ## More to come
 

_sass/_forms.scss

@@ -100,7 +100,6 @@ input.confirm-button {
 }
 
 /* Form progress */
-
 .ajax-form {
     position: relative;
 }
@@ -173,3 +172,26 @@ input.confirm-button {
     color: $red;
     width: 30px;
 }
+
+/* Tooltips */
+.has-tooltip {
+    display: inline-block;
+    position: relative;
+
+    .tooltip {
+        background-color: $tooltip-bg-color;
+        border: 1px solid $gray-lighter;
+        color: $tooltip-text-color;
+        font-size: 80%;
+        left: 23px;
+        padding: 3px 5px;
+        position: absolute;
+        visibility: hidden;
+        width: 180px;
+        z-index: 1;
+    }
+
+    &:hover .tooltip {
+        visibility: visible;
+    }
+}

_sass/_general.scss

@@ -126,7 +126,7 @@ img {
     max-width: 100%;
 }
 
-.light-border, img[src*="#light-border"] {
+.medium-border, img[src*="#medium-border"] {
     border: 1px solid $gray;
 }
 

_sass/_variables.scss

@@ -38,3 +38,7 @@ $updated-bg-color: $cyan;
 $updated-text-color: $white;
 
 $form-error-color: $red;
+
+$tooltip-bg-color: $black;
+$tooltip-text-color: $white
+

assets/js/ao-forms.js

@@ -54,15 +54,15 @@
         this._base.call(this, input);
 
         this.on('blur keyup', this.validate);
-        this._msg = ao(this.e.nextElementSibling);
-        if (this._msg.e.classList.contains('error-message') === false) {
-            this._msg = ao(document.createElement('span')).addClass('error-message');
+        this._msg = ao(input.nextElementSibling);
+        if (this._msg.hasClass('error-message') === false) {
+            this._msg = ao('<span>').addClass('error-message');
             this.after(this._msg);
         }
         this._validators = [];
         for (var i = 0; i < validatorsCount; ++i) {
             var validatorName = validatorNames[i];
-            var msg = input.getAttribute('data-val-' + validatorName);
+            var msg = this.attr('data-val-' + validatorName);
             if (Boolean(msg)) {
                 this._validators.push({ test: validators[validatorName], msg: msg });
             }
@@ -139,4 +139,17 @@
         }
         return new AoForm(form);
     };
+
+    ao(function () {
+        var tooltips = ao.getAllByCss('.has-tooltip');
+        for (var i = 0, l = tooltips.length; i < l; ++i) {
+            var tooltipOwner = ao(tooltips[i]);
+            var text = tooltipOwner.attr('data-tooltip');
+            var tooltip = ao('<span>').addClass('tooltip').html(text);
+            tooltipOwner.removeAttr('data-tooltip').append(tooltip);
+            var pos = tooltipOwner.attr('data-tooltip-pos');
+            if (!Boolean(pos)) { continue; }
+            tooltip.css('left', 'auto', 'right', 0, 'bottom', '29px');
+        }
+    });
 })(Ao);