add tabindices to show tooltips when associated item is tabbed to

app/assets/stylesheets/content/_tooltips.md

@@ -51,12 +51,26 @@ These can contain simple texts but are not suitable for HTML within the Tooltip.
         <input type="text" placeholder="First name" class="form--text-field" id="kurosaki" >
       </div>
       <div class="form--tooltip-container">
-        <span class="tooltip-right" data-tooltip="First name of the father">
+        <span class="tooltip-right" tabindex="0" data-tooltip="First name of the son">
           <i class="icon icon-help"></i>
         </span>
       </div>
     </div>
   </div>
+  <div class="form--field">
+    <label for="bankai" class="form--label">Bankai</label>
+    <div class="form--field-container">
+      <div class="form--select-container">
+        <select name="bankai" id="bankai" class="form--select">
+          <option value="hakka">Hakka no togame</option>
+          <option value="tensa">Tensa zangetsu</option>
+          <option value="zanka">Zanka no tachi</option>
+          <option value="kokujo">Kokujō Tengen Myō'ō</option>
+          <option value="tekken">Tekken tachikaze</option>
+        </select>
+      </div>
+    </div>
+  </div>
   <div class="form--field">
     <label for="kuchiki" class="form--label">Kuchiki</label>
     <div class="form--field-container">
@@ -64,7 +78,7 @@ These can contain simple texts but are not suitable for HTML within the Tooltip.
         <input type="text" class="form--text-field" placeholder="First name" id="kuchiki">
       </div>
       <div class="form--tooltip-container">
-        <span class="tooltip-right" data-tooltip="First name of a captain">
+        <span class="tooltip-right" tabindex="0" data-tooltip="First name of a captain">
           <i class="icon icon-help1"></i>
         </span>
       </div>
@@ -73,6 +87,8 @@ These can contain simple texts but are not suitable for HTML within the Tooltip.
 </form>
 ```
 
+Note that the tabindex has to be set manually on the `<span>` and not the containing element. `tabindex="0"` makes the item tabbable at all.
+
 ### Inline text
 
 ```

app/assets/stylesheets/content/_tooltips.sass

@@ -91,7 +91,7 @@ $tooltipArrowSize: 6px
 
   &:hover, &:focus
     background-color: transparent
-    &:before, &:after
+    &::before, &::after
       opacity: 1
       visibility: visible
   +colorize