Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="text-container">
              <p>
                The following article covers a topic that has recently moved to center stage–at least it seems that way. If you’ve been thinking you need to know more about unconditional love, here’s your opportunity.
              </p>
              <p>
                When darkness turns to day, the sun moves over the horizon and touches everything in sight. This movement across the landscape brightens everything. Such an illumination awakens us all. We rise with energy moving in and through us allowing us to create a new day. A day unique from all the rest and creatively woven into our soul.  This is the landscape of our soul. As you can see, nature has a way of showing us just how powerful we are. The same power that created the moon and
                <!-- footnote overlay start --><span class="footnote" id="fnref:1"><a href="#fn:1" rel="footnote">1</a></span><!-- footnote overlay end -->
                the stars and the movement of all space and time lies within the human heart. It is the heart of creation itself, and perhaps, the heart of our Creator.
                <!-- footnote overlay start --><span class="footnote" id="fnref:2"><a href="#fn:2" rel="footnote">2</a></span><!-- footnote overlay end -->
              </p>
              <p>
                Human beings are fortunate to be able to be aware of our awareness. This awareness gives us an opportunity to reflect on our soul and find blessing in being alive. Our consciousness of a creative force inside us guiding us into this world, through it, and eventually to our eternal home allows us to fulfill a 
              </p>
</div>

        <!-- footnote-list-wrapper start -->
          <div class="footnote-list-wrapper">
            <div class="bullet-points-container">
              <div class="bullet-points-row">
                <div class="footnote-number">
                  <span>
                    <a href="#fnref:1" rev="footnote">1</a>
                  </span>
                </div>
                <div class="footnote-text" id="fn:1">
                  <sub>
                    Others represented included: Takis, Sergio Camargo, Li Yuan-Chia, <a href="">https://www.vam.ac.uk/info/jobs</a>, Soto, Alejandro Otero, and Antonio Calderara, amongst others.
                  </sub>
                  <a href="#fnref:1" rev="footnote"></a>
                </div>
              </div>
              <div class="bullet-points-row">
                <div class="footnote-number">
                  <span>
                    <a href="#fnref:2" rev="footnote">2</a>
                  </span>
                </div>
                <div class="footnote-text" id="fn:2">
                  <sub>
                    Others represented included: Takis, Sergio Camargo, Li Yuan-Chia, Soto, Alejandro Otero, and Antonio Calderara, amongst others.
                    Others represented included: Takis, Sergio Camargo, Li Yuan-Chia, Soto, Alejandro Otero, and Antonio Calderara, amongst others.
                  </sub>
                  <a href="#fnref:2" rev="footnote"></a>
                </div>
              </div>
            </div>
          </div>
        <!-- footnote-list-wrapper end -->
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");

// Variables
// Primary
$white: #ffffff;
$light-grey: #E5E2E2;
$dark-grey: #3A4249;
$black: #000000;
$ivory: #DEDBD1;

body{
  font-family: 'Raleway', sans-serif;
}
.text-container{
  width: auto;
  max-width: 1200px;
  margin: 0 auto;
}
#footnote_box {
  margin-left: -11px;
  margin-top: 30.5px;
  box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.3);
  position: relative;
  padding: 16px;
  padding-top: 10px;
  background: #E8E7E1;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  border: #7F7F7F solid 1px;
  sub{
    font-size: 16px;
    line-height: 20px;
  }
  a{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 16px;     /* fallback */
    max-height: 32px;      /* fallback */
    -webkit-line-clamp: 1; /* number of lines to show */
    -webkit-box-orient: vertical;
    &:hover{
      text-decoration: underline;
    }
  }
  &:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 6px 7px;
    border-color: #E8E7E1 transparent;
    display: block;
    width: 0;
    z-index: 1;
    margin-left: -6px;
    top: -7px;
    left: 48%;
  }
  &:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 6px 7px;
    border-color: #7F7F7F transparent;
    display: block;
    width: 0;
    z-index: 0;
    margin-left: -6px;
    top: -8px;
    left: 48%;
  }

}
.footnote{//popup
  background: $ivory;
  padding: 1px 7px;  
  font-weight: lighter;
  font-size: 14px;
}
.footnote-list-wrapper{
  border-top: 1px solid $dark-grey;
  width: auto;
  max-width: 1440px;
  margin: 0 auto;
  .bullet-points-container{
    padding: 50px 0;
    width: auto;
    max-width: 600px;
    margin: 0 auto;
    .bullet-points-row{      
      display: grid;
      grid-template-columns: 25px auto;
      margin-bottom: 10px;
      .footnote-number{
        margin-top: 7px;
        span{
          margin-left: -3px;
          background: $ivory;
          padding: 1px 7px;
          font-weight: lighter;
          font-size: 14px;
        }
      }
      .footnote-text{
        sub{
          font-size: 18px;
          line-height: 23px;
        }
        a:hover{
          text-decoration: underline;
        }
      }
    }
    .bullet-points-row:last-of-type{
      margin-bottom: 0;
    }
  }
}




              
            
!

JS

              
                //library
(function() {
  (function($) {
    $.inlineFootnote = function(el, options) {
      var _this = this;
      this.el = $(el);
      this.el.data("inlineFootnote", this);
      this.initialize = function() {
        this.options = $.extend({}, $.inlineFootnote.defaultOptions, options);
        this.footnoteId = this.el.attr("href").match(/#(.*)/)[1];
        if (this.footnoteId) {
          this.el.mouseenter(this.openBox);
          return $("body").mousemove(this.closeBox);
        }
      };
      this.openBox = function(event) {
        var footnoteContent, linkOffset;
        if (!_this.box) {
          footnoteContent = $("[id='" + _this.footnoteId + "']").children().filter(":not('" + _this.options.hideFromContent + "')");
          linkOffset = _this.el.offset();
          _this.box = $("<div />", {
            id: _this.options.boxId,
            html: footnoteContent.clone().find(_this.options.hideFromContent).remove().end(),
            css: {
              position: "absolute",
              top: linkOffset.top,
              left: linkOffset.left + _this.el.outerWidth()
            }
          }).appendTo("body");
          return _this.positionBox();
        }
      };
      this.closeBox = function(event) {
        if (_this.box) {
          if (_this.isHoveringFootnote(event)) {
            clearTimeout(_this.closeTimeout);
            return _this.closeTimeout = null;
          } else {
            if (!_this.closeTimeout) {
              return _this.closeTimeout = setTimeout((function() {
                _this.box.remove();
                return _this.box = null;
              }), _this.options.hideDelay);
            }
          }
        }
      };
      this.isHoveringFootnote = function(event) {
        return this.box.is(event.target) || $(event.target).closest(this.box).length > 0 || event.target === this.el[0];
      };
      this.positionBox = function() {
        var boxHorizontalPadding, boxLeft, boxWidth, linkLeftOffset, windowWidth;
        boxHorizontalPadding = parseInt(this.box.css("padding-left")) + parseInt(this.box.css("padding-right"));
        linkLeftOffset = this.el.offset().left;
        windowWidth = $(window).width();
        if ((windowWidth / 2) > linkLeftOffset) {
          boxLeft = linkLeftOffset + 20;
          boxWidth = windowWidth - boxLeft - boxHorizontalPadding - this.options.boxMargin * 2;
          if (boxWidth > this.options.maximumBoxWidth) {
            boxWidth = this.options.maximumBoxWidth;
          }
        } else {
          boxWidth = linkLeftOffset - boxHorizontalPadding - this.options.boxMargin * 2;
          if (boxWidth > this.options.maximumBoxWidth) {
            boxWidth = this.options.maximumBoxWidth;
          }
          boxLeft = linkLeftOffset - boxWidth - this.options.boxMargin * 2;
        }

        var boxWidthDivided = boxWidth / 2; // calculate position for the footnote

        return this.box.css({
          width: boxWidth,
          left: (linkLeftOffset - boxWidthDivided) + 6
        });
      };
      return this.initialize();
    };
    $.inlineFootnote.defaultOptions = {
      boxMargin: 20,
      hideDelay: 200,
      hideFromContent: "[rev=footnote]",
      maximumBoxWidth: 350,
      boxId: "footnote_box"
    };
    return $.fn.inlineFootnote = function(options) {
      return this.each(function() {
        return new $.inlineFootnote(this, options);
      });
    };
  })(jQuery);

}).call(this);

//initialize
$(function() {
  $("[rel=footnote]").inlineFootnote();
});
              
            
!
999px

Console