LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Footnotes

Linked Annotations

For annotations, the a element should be used, pointing to an element later in the document. The convention is that the contents of the link be a number in square brackets.

– W3C, HTML 5.2, retreived

Linking with Portals1 is one method you can use to achieve quantum teleportation.

  1. 1 A play on words, or “pun.” The original slogan is Thinking with Portals.

Tooltips

For short inline annotations, the title attribute could be used.

– W3C, HTML 5.2, retreived

Linking with Portals is one method you can use to achieve quantum teleportation.

CSS
main {
  margin: 0 auto;
  padding: 0 1rem;
}
blockquote::after {
  content: attr(cite);
  display: block;
  font-size: 0.5em;
  line-height: calc(var(--line-height) / 0.5);
}
blockquote > footer,
blockquote::after {
  text-align: right;
}
span.Footnote[title] {
  text-decoration: underline dotted;
  cursor: pointer;
}
span.Footnote[title]:not(:focus) > small[role="tooltip"] {
  display: none;
}
JS
console.clear();

let count = 0;

document.querySelectorAll('span.Footnote[title]').forEach(function (ref) {
  ;(function () {
    let tip = document.createElement('small')
    tip.id = `tt${count++}`;
    // tip.hidden = true // keep commented for development testing
    tip.setAttribute('role','tooltip')
    tip.textContent = ref.getAttribute('title')

    ref.tabIndex = 0
    ref.setAttribute('aria-describedby', tip.id)
    ref.append(tip)
  })()

  /**
   * Toggles the current hidden state of the tooltip.
   * Specify a parameter to override.
   * @param {boolean} show if `true`, force unhidden; if `false`, force hidden
   */
  // ref.toggle = function (show) {
  //   let tip = this.querySelector('[role="tooltip"]')
  //   tip.hidden = (arguments.length) ? !show : !tip.hidden
  //   // if (tip.classList.contains('hide')) tip.classList.remove('hide')
  //   // else tip.classList.add('hide')
  // }

  // ref.addEventListener('focus', function (e) {
  //   this.toggle()
  // })

//   ref.addEventListener('mouseover', function (e) {
//     this.toggle(false)
//   })

//   ref.addEventListener('mouseout', function (e) {
//     this.toggle(true)
//   })

  // ref.addEventListener('keydown', function (e) {
  //   if (e.which === 32) { // SPACE
  //     this.toggle()
  //   }
  // })
})
Term
Wed, 12/27/2017 - 07:00

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv