Manually 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="password">Password: </label><input data-adg-tooltip-complex="&lt;ul&gt;&lt;li&gt;At least 8 characters&lt;/li&gt;&lt;li&gt;At least 8 characters&lt;/li&gt;&lt;li&gt;Upper and lower case&lt;/li&gt;&lt;li&gt;At least 1 special character&lt;/li&gt;&lt;li&gt;Read more about &lt;a href=&#39;https://en.wikipedia.org/wiki/Password_strength&#39;&gt;Password Strength (Wikipedia.org)&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;" id="password" type="password" />
</p>
<p>
  <label for="about">About: </label><textarea data-adg-tooltip-complex="&lt;p&gt;Tell a little something about yourself, for example where you were born, what hobbies you have, what food you like, etc.&lt;/p&gt;&lt;p&gt;You can even tell us some details about your bank accounts, like your balance, secret logins, passwords, and anything that could be of interest to us.&lt;/p&gt;&lt;p&gt;Thank you so much for your open-mindedness!&lt;/p&gt;" id="about"></textarea>
</p>
<p>
  <label for="like-cheese">Do you like cheese?</label><input data-adg-tooltip-complex="&lt;p&gt;Mmmh, what do you think about this?&lt;/p&gt;&lt;p&gt;&lt;img src=&#39;https://www.emmentaler.ch/files/content/chde/sortiment/sortiment_03lower_06gotthelf.png&#39; alt=&#39;Cave-agend Emmentaler, yummy!&#39; /&gt;&lt;/p&gt;" id="like-cheese" type="checkbox" />
</p>
<p>
  If you like, please visit this: <a data-adg-tooltip-complex="&lt;p&gt;This is really a great link. But we have alternatives:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=&#39;http://www.asdf.com&#39;&gt;Asdf.com&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&#39;http://gifdanceparty.giphy.com/&#39;&gt;GIF Dance Party (Giphy.com)&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;" 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-complex {
  position: relative;
}

.adg-tooltip-complex-icon {
  border: 0;
  padding: 0 4px;
}
.adg-tooltip-complex-icon:hover {
  cursor: pointer;
}

.adg-tooltip-complex-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;
  background-color: lightyellow;
  width: 300px;
}
.adg-tooltip-complex-balloon img {
  max-width: 100%;
}

svg#definition {
  display: none;
}

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

  AdgTooltipComplex = class AdgTooltipComplex {
    constructor(el) {
      this.$el = $(el);
      this.value = this.$el.attr('data-adg-tooltip-complex');
      this.$el.attr('data-adg-tooltip-complex', null);
      this.initContainer();
      this.attachContentToEl();
      this.initIconEvents();
    }

    initContainer() {
      this.$container = $("<span class='adg-tooltip-complex'></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 = $("<button class='adg-tooltip-complex-icon' aria-expanded='false'><span class='adg-visually-hidden'>Toggle tooltip</span><svg class='icon' focusable='false'><use xlink:href='#tooltip' /></svg></button>");
      return this.$container.append(this.$icon);
    }

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

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

    initIconEvents() {
      return this.$icon.click(() => {
        if (this.$balloon.is(':visible')) {
          return this.hide();
        } else {
          return this.show();
        }
      });
    }

    show() {
      this.$balloon.attr('hidden', false);
      return this.$icon.attr('aria-expanded', true);
    }

    hide() {
      this.$balloon.attr('hidden', true);
      return this.$icon.attr('aria-expanded', false);
    }

  };

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

}).call(this);

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUFBQSxNQUFBOztFQUFNLG9CQUFOLE1BQUEsa0JBQUE7SUFDRSxXQUFhLENBQUMsRUFBRCxDQUFBO01BQ1gsSUFBQyxDQUFBLEdBQUQsR0FBTyxDQUFBLENBQUUsRUFBRjtNQUNQLElBQUMsQ0FBQSxLQUFELEdBQVMsSUFBQyxDQUFBLEdBQUcsQ0FBQyxJQUFMLENBQVUsMEJBQVY7TUFDVCxJQUFDLENBQUEsR0FBRyxDQUFDLElBQUwsQ0FBVSwwQkFBVixFQUFzQyxJQUF0QztNQUVBLElBQUMsQ0FBQSxhQUFELENBQUE7TUFDQSxJQUFDLENBQUEsaUJBQUQsQ0FBQTtNQUVBLElBQUMsQ0FBQSxjQUFELENBQUE7SUFSVzs7SUFVYixhQUFlLENBQUEsQ0FBQTtNQUNiLElBQUMsQ0FBQSxVQUFELEdBQWMsQ0FBQSxDQUFFLDJDQUFGO01BQ2QsSUFBQyxDQUFBLEdBQUcsQ0FBQyxLQUFMLENBQVcsSUFBQyxDQUFBLFVBQVo7TUFFQSxJQUFDLENBQUEsUUFBRCxDQUFBO2FBQ0EsSUFBQyxDQUFBLFdBQUQsQ0FBQTtJQUxhOztJQU9mLFFBQVUsQ0FBQSxDQUFBLEVBQUE7O01BRVIsSUFBQyxDQUFBLEtBQUQsR0FBUyxDQUFBLENBQUUsd01BQUY7YUFDVCxJQUFDLENBQUEsVUFBVSxDQUFDLE1BQVosQ0FBbUIsSUFBQyxDQUFBLEtBQXBCO0lBSFE7O0lBS1YsV0FBYSxDQUFBLENBQUE7TUFDWCxJQUFDLENBQUEsUUFBRCxHQUFZLENBQUEsQ0FBRSxDQUFBLGdEQUFBLENBQUEsQ0FBbUQsSUFBQyxDQUFBLEtBQXBELENBQUEsTUFBQSxDQUFGO01BQ1osSUFBQyxDQUFBLFFBQVEsQ0FBQyxJQUFWLENBQWUsSUFBZixFQUFxQixDQUFBLENBQUEsQ0FBRyxJQUFDLENBQUEsR0FBRyxDQUFDLElBQUwsQ0FBVSxJQUFWLENBQUgsQ0FBQSxRQUFBLENBQXJCO2FBQ0EsSUFBQyxDQUFBLFVBQVUsQ0FBQyxNQUFaLENBQW1CLElBQUMsQ0FBQSxRQUFwQjtJQUhXOztJQUtiLGlCQUFtQixDQUFBLENBQUE7QUFDckIsVUFBQTtNQUFJLFlBQUEsR0FBZSxDQUFBLENBQUUsd0ZBQUY7TUFDZixJQUFHLElBQUMsQ0FBQSxHQUFHLENBQUMsRUFBTCxDQUFRLHlCQUFSLENBQUg7ZUFDRSxDQUFBLENBQUUsQ0FBQSxXQUFBLENBQUEsQ0FBYyxJQUFDLENBQUEsR0FBRyxDQUFDLElBQUwsQ0FBVSxJQUFWLENBQWQsQ0FBQSxDQUFBLENBQUYsQ0FBbUMsQ0FBQyxNQUFwQyxDQUEyQyxZQUEzQyxFQURGO09BQUEsTUFBQTtlQUdFLElBQUMsQ0FBQSxHQUFHLENBQUMsTUFBTCxDQUFZLFlBQVosRUFIRjs7SUFGaUI7O0lBT25CLGNBQWdCLENBQUEsQ0FBQTthQUNkLElBQUMsQ0FBQSxLQUFLLENBQUMsS0FBUCxDQUFhLENBQUEsQ0FBQSxHQUFBO1FBQ1gsSUFBRyxJQUFDLENBQUEsUUFBUSxDQUFDLEVBQVYsQ0FBYSxVQUFiLENBQUg7aUJBQ0UsSUFBQyxDQUFBLElBQUQsQ0FBQSxFQURGO1NBQUEsTUFBQTtpQkFHRSxJQUFDLENBQUEsSUFBRCxDQUFBLEVBSEY7O01BRFcsQ0FBYjtJQURjOztJQU9oQixJQUFNLENBQUEsQ0FBQTtNQUNKLElBQUMsQ0FBQSxRQUFRLENBQUMsSUFBVixDQUFlLFFBQWYsRUFBeUIsS0FBekI7YUFDQSxJQUFDLENBQUEsS0FBSyxDQUFDLElBQVAsQ0FBWSxlQUFaLEVBQTZCLElBQTdCO0lBRkk7O0lBSU4sSUFBTSxDQUFBLENBQUE7TUFDSixJQUFDLENBQUEsUUFBUSxDQUFDLElBQVYsQ0FBZSxRQUFmLEVBQXlCLElBQXpCO2FBQ0EsSUFBQyxDQUFBLEtBQUssQ0FBQyxJQUFQLENBQVksZUFBWixFQUE2QixLQUE3QjtJQUZJOztFQTlDUjs7RUFrREEsQ0FBQSxDQUFFLFFBQUYsQ0FBVyxDQUFDLEtBQVosQ0FBa0IsUUFBQSxDQUFBLENBQUE7V0FDaEIsQ0FBQSxDQUFFLDRCQUFGLENBQStCLENBQUMsSUFBaEMsQ0FBcUMsUUFBQSxDQUFBLENBQUE7YUFDbkMsSUFBSSxpQkFBSixDQUFzQixJQUF0QjtJQURtQyxDQUFyQztFQURnQixDQUFsQjtBQWxEQSIsInNvdXJjZXNDb250ZW50IjpbImNsYXNzIEFkZ1Rvb2x0aXBDb21wbGV4XG4gIGNvbnN0cnVjdG9yOiAoZWwpIC0+XG4gICAgQCRlbCA9ICQoZWwpXG4gICAgQHZhbHVlID0gQCRlbC5hdHRyKCdkYXRhLWFkZy10b29sdGlwLWNvbXBsZXgnKVxuICAgIEAkZWwuYXR0cignZGF0YS1hZGctdG9vbHRpcC1jb21wbGV4JywgbnVsbClcbiAgXG4gICAgQGluaXRDb250YWluZXIoKVxuICAgIEBhdHRhY2hDb250ZW50VG9FbCgpXG4gICAgXG4gICAgQGluaXRJY29uRXZlbnRzKClcbiAgICBcbiAgaW5pdENvbnRhaW5lcjogLT5cbiAgICBAJGNvbnRhaW5lciA9ICQoXCI8c3BhbiBjbGFzcz0nYWRnLXRvb2x0aXAtY29tcGxleCc+PC9zcGFuPlwiKVxuICAgIEAkZWwuYWZ0ZXIoQCRjb250YWluZXIpXG5cbiAgICBAaW5pdEljb24oKVxuICAgIEBpbml0QmFsbG9vbigpXG4gIFxuICBpbml0SWNvbjogLT5cbiAgICAjIFNldCBmb2N1c2FibGU9XCJmYWxzZVwiIGZvciBJRSwgc2VlIGh0dHBzOi8vc3RhY2tvdmVyZmxvdy5jb20vcXVlc3Rpb25zLzE4NjQ2MTExL2Rpc2FibGUtb25mb2N1cy1ldmVudC1mb3Itc3ZnLWVsZW1lbnRcbiAgICBAJGljb24gPSAkKFwiPGJ1dHRvbiBjbGFzcz0nYWRnLXRvb2x0aXAtY29tcGxleC1pY29uJyBhcmlhLWV4cGFuZGVkPSdmYWxzZSc+PHNwYW4gY2xhc3M9J2FkZy12aXN1YWxseS1oaWRkZW4nPlRvZ2dsZSB0b29sdGlwPC9zcGFuPjxzdmcgY2xhc3M9J2ljb24nIGZvY3VzYWJsZT0nZmFsc2UnPjx1c2UgeGxpbms6aHJlZj0nI3Rvb2x0aXAnIC8+PC9zdmc+PC9idXR0b24+XCIpXG4gICAgQCRjb250YWluZXIuYXBwZW5kKEAkaWNvbilcbiAgICBcbiAgaW5pdEJhbGxvb246IC0+XG4gICAgQCRiYWxsb29uID0gJChcIjxkaXYgY2xhc3M9J2FkZy10b29sdGlwLWNvbXBsZXgtYmFsbG9vbicgaGlkZGVuPiN7QHZhbHVlfTwvZGl2PlwiKVxuICAgIEAkYmFsbG9vbi5hdHRyKCdpZCcsIFwiI3tAJGVsLmF0dHIoJ2lkJyl9LWJhbGxvb25cIilcbiAgICBAJGNvbnRhaW5lci5hcHBlbmQoQCRiYWxsb29uKVxuICAgIFxuICBhdHRhY2hDb250ZW50VG9FbDogLT5cbiAgICB2YWx1ZUVsZW1lbnQgPSAkKFwiPHNwYW4gY2xhc3M9J2FkZy12aXN1YWxseS1oaWRkZW4nPiAoZm9yIG1vcmUgZGV0YWlscywgY29uc3VsdCBhZGphY2VudCB0b29sdGlwKTwvc3Bhbj5cIilcbiAgICBpZiBAJGVsLmlzKCdpbnB1dCwgdGV4dGFyZWEsIHNlbGVjdCcpXG4gICAgICAkKFwibGFiZWxbZm9yPScje0AkZWwuYXR0cignaWQnKX0nXCIpLmFwcGVuZCh2YWx1ZUVsZW1lbnQpXG4gICAgZWxzZVxuICAgICAgQCRlbC5hcHBlbmQodmFsdWVFbGVtZW50KVxuICAgIFxuICBpbml0SWNvbkV2ZW50czogLT5cbiAgICBAJGljb24uY2xpY2sgPT5cbiAgICAgIGlmIEAkYmFsbG9vbi5pcygnOnZpc2libGUnKVxuICAgICAgICBAaGlkZSgpXG4gICAgICBlbHNlXG4gICAgICAgIEBzaG93KClcbiAgICAgICAgXG4gIHNob3c6IC0+XG4gICAgQCRiYWxsb29uLmF0dHIoJ2hpZGRlbicsIGZhbHNlKVxuICAgIEAkaWNvbi5hdHRyKCdhcmlhLWV4cGFuZGVkJywgdHJ1ZSlcbiAgICBcbiAgaGlkZTogLT5cbiAgICBAJGJhbGxvb24uYXR0cignaGlkZGVuJywgdHJ1ZSlcbiAgICBAJGljb24uYXR0cignYXJpYS1leHBhbmRlZCcsIGZhbHNlKVxuICAgIFxuJChkb2N1bWVudCkucmVhZHkgLT5cbiAgJCgnW2RhdGEtYWRnLXRvb2x0aXAtY29tcGxleF0nKS5lYWNoIC0+XG4gICAgbmV3IEFkZ1Rvb2x0aXBDb21wbGV4IEAiXX0=
//# sourceURL=coffeescript