Automatically Displayed Tooltip

If you like, please visit this: Example.com is great.

Code

<svg id="definition" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><symbol id="tooltip" viewbox="0 0 442.762 442.762"><g><path d="M237.082,31.617c-113.596,0-205.68,84.96-205.68,189.764c0,28.473,6.809,55.473,18.986,79.711L1.736,389.064 		c-2.705,4.887-2.215,10.916,1.238,15.307c2.672,3.396,6.721,5.299,10.912,5.299c1.223,0,2.457-0.162,3.674-0.498l106.506-29.232 c32.432,19.719,71.266,31.205,113.016,31.205c113.594,0,205.68-84.959,205.68-189.764 		C442.762,116.577,350.676,31.617,237.082,31.617z M236.737,318.873c-11.227,0-20.356-9.132-20.356-20.357 		c0-11.225,9.131-20.357,20.356-20.357c11.227,0,20.357,9.133,20.357,20.357C257.096,309.74,247.965,318.873,236.737,318.873z 	M258.064,222.034c-2.674,1.828-4.522,3.175-5.522,4.021v21.272c0,8.712-7.091,15.8-15.802,15.8c-8.715,0-15.802-7.088-15.802-15.8 		v-22.918c0-15.281,11.152-22.903,19.296-28.467c8.789-6.005,14.595-9.972,14.595-22.361c0-9.975-8.113-18.09-18.089-18.09 		c-9.977,0-18.089,8.115-18.089,18.09c0,8.713-7.09,15.801-15.803,15.801c-8.713,0-15.803-7.088-15.803-15.801 		c0-27.4,22.293-49.692,49.694-49.692c27.398,0,49.691,22.292,49.691,49.692C286.432,202.653,268.674,214.787,258.064,222.034z"></path></g></symbol></defs></svg>
<p>
  <label for="name">Name: </label><input data-adg-tooltip-simple="Please enter both your first and last name" id="name" type="text" />
</p>
<p>
  <label for="about">About: </label><textarea data-adg-tooltip-simple="Tell a little something about yourself" id="about"></textarea>
</p>
<p>
  <label for="like-cheese">Do you like cheese?</label><input data-adg-tooltip-simple="Especially swiss cheese" id="like-cheese" type="checkbox" />
</p>
<p>
  <label for="language">Prefered language: </label><select data-adg-tooltip-simple="Usually your mother tongue" id="language" type="checkbox">
    <option>
      English
    </option>
    <option>
      French
    </option>
    <option>
      German
    </option>
  </select>
</p>
<p>
  If you like, please visit this: <a data-adg-tooltip-simple="Yes, it&#39;s really great!" href="http://www.example.com">Example.com is great</a>.
</p>
*:focus {
  outline: 2px dotted #000;
}

.adg-visually-hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.adg-tooltip-simple {
  position: relative;
}

.adg-tooltip-simple-icon {
  padding: 0 4px;
}
.adg-tooltip-simple-icon:hover {
  cursor: default;
}

.adg-tooltip-simple-balloon {
  background-color: #fff;
  font-weight: normal;
  border: 1px solid;
  border-radius: 3px;
  padding: 2px 6px;
  position: absolute;
  z-index: 1;
  left: 100%;
  top: -5px;
  white-space: nowrap;
  background-color: lightyellow;
}

svg#definition {
  display: none;
}

.icon {
  width: 16px;
  height: 16px;
  fill: #000;
}
(function() {
  var AdgTooltipSimple;

  AdgTooltipSimple = class AdgTooltipSimple {
    constructor(el) {
      this.$el = $(el);
      this.value = this.$el.attr('data-adg-tooltip-simple');
      this.$el.attr('data-adg-tooltip-simple', null);
      this.initContainer();
      this.attachContentToEl();
      this.initElEvents();
      this.initContainerEvents();
    }

    initContainer() {
      this.$container = $("<span class='adg-tooltip-simple' aria-hidden='true'></span>");
      this.$el.after(this.$container);
      this.initIcon();
      return this.initBalloon();
    }

    initIcon() {
      // Set focusable="false" for IE, see https://stackoverflow.com/questions/18646111/disable-onfocus-event-for-svg-element
      this.$icon = $("<span class='adg-tooltip-simple-icon'><svg class='icon' focusable='false'><use xlink:href='#tooltip' /></svg></span>");
      return this.$container.append(this.$icon);
    }

    initBalloon() {
      this.$balloon = $(`<span class='adg-tooltip-simple-balloon' hidden>${this.value}</span>`);
      this.$balloon.attr('id', `${this.$el.attr('id')}-balloon`);
      return this.$container.append(this.$balloon);
    }

    attachContentToEl() {
      var valueElement;
      valueElement = $(`<span class='adg-visually-hidden'> (${this.value})</span>`);
      if (this.$el.is('input, textarea, select')) {
        return $(`label[for='${this.$el.attr('id')}'`).append(valueElement);
      } else {
        return this.$el.append(valueElement);
      }
    }

    initElEvents() {
      this.$el.focusin(() => {
        return this.show();
      });
      this.$el.focusout(() => {
        if (!this.$container.is(':hover')) {
          return this.hide();
        }
      });
      this.$el.mouseenter(() => {
        return this.show();
      });
      this.$el.mouseleave(() => {
        if (!this.$el.is(':focus')) {
          return this.hide();
        }
      });
      return this.$el.keyup((e) => {
        if (e.keyCode === 27) { // Esc
          if (this.$balloon.is(':visible')) {
            return this.hide();
          } else {
            return this.show();
          }
        }
      });
    }

    initContainerEvents() {
      this.$container.mouseenter(() => {
        return this.show();
      });
      return this.$container.mouseleave(() => {
        if (!this.$el.is(':focus')) {
          return this.hide();
        }
      });
    }

    show() {
      return this.$balloon.attr('hidden', false);
    }

    hide() {
      return this.$balloon.attr('hidden', true);
    }

  };

  $(document).ready(function() {
    return $('[data-adg-tooltip-simple]').each(function() {
      return new AdgTooltipSimple(this);
    });
  });

}).call(this);

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUFBQSxNQUFBOztFQUFNLG1CQUFOLE1BQUEsaUJBQUE7SUFDRSxXQUFhLENBQUMsRUFBRCxDQUFBO01BQ1gsSUFBQyxDQUFBLEdBQUQsR0FBTyxDQUFBLENBQUUsRUFBRjtNQUNQLElBQUMsQ0FBQSxLQUFELEdBQVMsSUFBQyxDQUFBLEdBQUcsQ0FBQyxJQUFMLENBQVUseUJBQVY7TUFDVCxJQUFDLENBQUEsR0FBRyxDQUFDLElBQUwsQ0FBVSx5QkFBVixFQUFxQyxJQUFyQztNQUVBLElBQUMsQ0FBQSxhQUFELENBQUE7TUFDQSxJQUFDLENBQUEsaUJBQUQsQ0FBQTtNQUVBLElBQUMsQ0FBQSxZQUFELENBQUE7TUFDQSxJQUFDLENBQUEsbUJBQUQsQ0FBQTtJQVRXOztJQVdiLGFBQWUsQ0FBQSxDQUFBO01BQ2IsSUFBQyxDQUFBLFVBQUQsR0FBYyxDQUFBLENBQUUsNkRBQUY7TUFDZCxJQUFDLENBQUEsR0FBRyxDQUFDLEtBQUwsQ0FBVyxJQUFDLENBQUEsVUFBWjtNQUVBLElBQUMsQ0FBQSxRQUFELENBQUE7YUFDQSxJQUFDLENBQUEsV0FBRCxDQUFBO0lBTGE7O0lBT2YsUUFBVSxDQUFBLENBQUEsRUFBQTs7TUFFUixJQUFDLENBQUEsS0FBRCxHQUFTLENBQUEsQ0FBRSxzSEFBRjthQUNULElBQUMsQ0FBQSxVQUFVLENBQUMsTUFBWixDQUFtQixJQUFDLENBQUEsS0FBcEI7SUFIUTs7SUFLVixXQUFhLENBQUEsQ0FBQTtNQUNYLElBQUMsQ0FBQSxRQUFELEdBQVksQ0FBQSxDQUFFLENBQUEsZ0RBQUEsQ0FBQSxDQUFtRCxJQUFDLENBQUEsS0FBcEQsQ0FBQSxPQUFBLENBQUY7TUFDWixJQUFDLENBQUEsUUFBUSxDQUFDLElBQVYsQ0FBZSxJQUFmLEVBQXFCLENBQUEsQ0FBQSxDQUFHLElBQUMsQ0FBQSxHQUFHLENBQUMsSUFBTCxD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IGNvbnN0cnVjdG9yOiAoZWwpIC0+XG4gICAgQCRlbCA9ICQoZWwpXG4gICAgQHZhbHVlID0gQCRlbC5hdHRyKCdkYXRhLWFkZy10b29sdGlwLXNpbXBsZScpXG4gICAgQCRlbC5hdHRyKCdkYXRhLWFkZy10b29sdGlwLXNpbXBsZScsIG51bGwpXG4gIFxuICAgIEBpbml0Q29udGFpbmVyKClcbiAgICBAYXR0YWNoQ29udGVudFRvRWwoKVxuICAgIFxuICAgIEBpbml0RWxFdmVudHMoKVxuICAgIEBpbml0Q29udGFpbmVyRXZlbnRzKClcbiAgICBcbiAgaW5pdENvbnRhaW5lcjogLT5cbiAgICBAJGNvbnRhaW5lciA9ICQoXCI8c3BhbiBjbGFzcz0nYWRnLXRvb2x0aXAtc2ltcGxlJyBhcmlhLWhpZGRlbj0ndHJ1ZSc+PC9zcGFuPlwiKVxuICAgIEAkZWwuYWZ0ZXIoQCRjb250YWluZXIpXG5cbiAgICBAaW5pdEljb24oKVxuICAgIEBpbml0QmFsbG9vbigpXG4gIFxuICBpbml0SWNvbjogLT5cbiAgICAjIFNldCBmb2N1c2FibGU9XCJmYWxzZVwiIGZvciBJRSwgc2VlIGh0dHBzOi8vc3RhY2tvdmVyZmxvdy5jb20vcXVlc3Rpb25zLzE4NjQ2MTExL2Rpc2FibGUtb25mb2N1cy1ldmVudC1mb3Itc3ZnLWVsZW1lbnRcbiAgICBAJGljb24gPSAkKFwiPHNwYW4gY2xhc3M9J2FkZy10b29sdGlwLXNpbXBsZS1pY29uJz48c3ZnIGNsYXNzPSdpY29uJyBmb2N1c2FibGU9J2ZhbHNlJz48dXNlIHhsaW5rOmhyZWY9JyN0b29sdGlwJyAvPjwvc3ZnPjwvc3Bhbj5cIilcbiAgICBAJGNvbnRhaW5lci5hcHBlbmQoQCRpY29uKVxuICAgIFxuICBpbml0QmFsbG9vbjogLT5cbiAgICBAJGJhbGxvb24gPSAkKFwiPHNwYW4gY2xhc3M9J2FkZy10b29sdGlwLXNpbXBsZS1iYWxsb29uJyBoaWRkZW4+I3tAdmFsdWV9PC9zcGFuPlwiKVxuICAgIEAkYmFsbG9vbi5hdHRyKCdpZCcsIFwiI3tAJGVsLmF0dHIoJ2lkJyl9LWJhbGxvb25cIilcbiAgICBAJGNvbnRhaW5lci5hcHBlbmQoQCRiYWxsb29uKVxuICAgIFxuICBhdHRhY2hDb250ZW50VG9FbDogLT5cbiAgICB2YWx1ZUVsZW1lbnQgPSAkKFwiPHNwYW4gY2xhc3M9J2FkZy12aXN1YWxseS1oaWRkZW4nPiAoI3tAdmFsdWV9KTwvc3Bhbj5cIilcbiAgICBpZiBAJGVsLmlzKCdpbnB1dCwgdGV4dGFyZWEsIHNlbGVjdCcpXG4gICAgICAkKFwibGFiZWxbZm9yPScje0AkZWwuYXR0cignaWQnKX0nXCIpLmFwcGVuZCh2YWx1ZUVsZW1lbnQpXG4gICAgZWxzZVxuICAgICAgQCRlbC5hcHBlbmQodmFsdWVFbGVtZW50KVxuICBcbiAgaW5pdEVsRXZlbnRzOiAtPlxuICAgIEAkZWwuZm9jdXNpbiA9PiBAc2hvdygpXG4gICAgQCRlbC5mb2N1c291dCA9PlxuICAgICAgQGhpZGUoKSB1bmxlc3MgQCRjb250YWluZXIuaXMoJzpob3ZlcicpXG4gICAgXG4gICAgQCRlbC5tb3VzZWVudGVyID0+IEBzaG93KClcbiAgICBAJGVsLm1vdXNlbGVhdmUgPT5cbiAgICAgIEBoaWRlKCkgdW5sZXNzIEAkZWwuaXMoJzpmb2N1cycpXG4gICAgICAgIFxuICAgIEAkZWwua2V5dXAgKGUpID0+XG4gICAgICBpZiBlLmtleUNvZGUgPT0gMjcgIyBFc2NcbiAgICAgICAgaWYgQCRiYWxsb29uLmlzKCc6dmlzaWJsZScpXG4gICAgICAgICAgQGhpZGUoKVxuICAgICAgICBlbHNlXG4gICAgICAgICAgQHNob3coKVxuICAgIFxuICBpbml0Q29udGFpbmVyRXZlbnRzOiAtPlxuICAgIEAkY29udGFpbmVyLm1vdXNlZW50ZXIgPT4gQHNob3coKVxuICAgIEAkY29udGFpbmVyLm1vdXNlbGVhdmUgPT5cbiAgICAgIEBoaWRlKCkgdW5sZXNzIEAkZWwuaXMoJzpmb2N1cycpXG4gICAgXG4gIHNob3c6IC0+XG4gICAgQCRiYWxsb29uLmF0dHIoJ2hpZGRlbicsIGZhbHNlKVxuICAgIFxuICBoaWRlOiAtPlxuICAgIEAkYmFsbG9vbi5hdHRyKCdoaWRkZW4nLCB0cnVlKVxuICAgIFxuJChkb2N1bWVudCkucmVhZHkgLT5cbiAgJCgnW2RhdGEtYWRnLXRvb2x0aXAtc2ltcGxlXScpLmVhY2ggLT5cbiAgICBuZXcgQWRnVG9vbHRpcFNpbXBsZSBAIl19
//# sourceURL=coffeescript