Footnote 

<div style="margin-left: 50px">
    <p>
        Lorem gibson Chiba nano-bridge simstim deck bridge vinyl gentlemen loser courier euro-pop systema.
        Screen assassin computer ice wonton soup Tokyo systemic sprawl jacket nano. <a href="#fn:1" id="fnref:1" title="see footnote" class="footnote">[1]</a> Lorem gibson Chiba nano-bridge simstim deck bridge vinyl gentlemen loser courier euro-pop systema.
        Screen assassin computer ice wonton soup Tokyo systemic sprawl jacket nano.
    </p>

    <div class="footnotes">
        <ol class="footnotes__list">
            <li id="fn:1">
                <p>
                    Lorem gibson courier long-chain hydrocarbons realism bomb otaku SIN tiger-team macroform node dermatrodes tower Chiba City pre-table DIY chrome Mole IX camera People of Importance.
                    Lorem gibson temperfoam sunglasses assault systema tower order-flow screen macroform node tanto sprawl icebreaker drone sentient Mole IX Mycotoxin Dex.
                    <a href="#fnref:1" title="return to article">&nbsp;↩</a>
                </p>
            </li>
            <li id="fn:2">
                <p>
                    Lorem gibson modem hotdog market corrupted Metro Holografix sprawl EMP.
                </p>
                <p>
                    Lorem gibson Kowloon man House of the Blue Lights Turing Registry wristwatch geodesic nodality new yen House of the Blue Lights memory refrigerator advert free-market.
                    <a href="#fnref:2" title="return to article">&nbsp;↩</a>
                </p>
            </li>
            <li id="fn:3">
                <p>
                    Eberhard Wolff: Microservices: Grundlagen flexibler Softwarearchitekturen, dpunkt.verlag, 2015, ISBN 978–3864903137
                    <a href="#fnref:3" title="return to article">&nbsp;↩</a>
                </p>
            </li>
            <li id="fn:4">
                <p>
                    Lorem gibson courier long-chain hydrocarbons realism bomb otaku SIN tiger-team macroform node dermatrodes tower Chiba City pre-table DIY chrome Mole IX camera People of Importance.
                    Lorem gibson temperfoam sunglasses assault systema tower order-flow screen macroform node tanto sprawl icebreaker drone sentient Mole IX Mycotoxin Dex.
                    <a href="#fnref:4" title="return to article">&nbsp;↩</a>
                </p>
            </li>
            <li id="fn:5">
                <p>
                    Lorem gibson modem hotdog market corrupted Metro Holografix sprawl EMP.
                </p>
                <p>
                    Lorem gibson Kowloon man House of the Blue Lights Turing Registry wristwatch geodesic nodality new yen House of the Blue Lights memory refrigerator advert free-market.
                    <a href="#fnref:5" title="return to article">&nbsp;↩</a>
                </p>
            </li>
            <li id="fn:6">
                <p>
                    Eberhard Wolff: Microservices: Grundlagen flexibler Softwarearchitekturen, dpunkt.verlag, 2015, ISBN 978–3864903137
                    <a href="#fnref:6" title="return to article">&nbsp;↩</a>
                </p>
            </li>
            <li id="fn:7">
                <p>
                    Lorem gibson courier long-chain hydrocarbons realism bomb otaku SIN tiger-team macroform node dermatrodes tower Chiba City pre-table DIY chrome Mole IX camera People of Importance.
                    Lorem gibson temperfoam sunglasses assault systema tower order-flow screen macroform node tanto sprawl icebreaker drone sentient Mole IX Mycotoxin Dex.
                    <a href="#fnref:7" title="return to article">&nbsp;↩</a>
                </p>
            </li>
            <li id="fn:8">
                <p>
                    Lorem gibson modem hotdog market corrupted Metro Holografix sprawl EMP.
                </p>
                <p>
                    Lorem gibson Kowloon man House of the Blue Lights Turing Registry wristwatch geodesic nodality new yen House of the Blue Lights memory refrigerator advert free-market.
                    <a href="#fnref:8" title="return to article">&nbsp;↩</a>
                </p>
            </li>
            <li id="fn:9">
                <p>
                    Eberhard Wolff: Microservices: Grundlagen flexibler Softwarearchitekturen, dpunkt.verlag, 2015, ISBN 978–3864903137
                    <a href="#fnref:9" title="return to article">&nbsp;↩</a>
                </p>
            </li>
            <li id="fn:10">
                <p>
                    Lorem gibson courier long-chain hydrocarbons realism bomb otaku SIN tiger-team macroform node dermatrodes tower Chiba City pre-table DIY chrome Mole IX camera People of Importance.
                    Lorem gibson temperfoam sunglasses assault systema tower order-flow screen macroform node tanto sprawl icebreaker drone sentient Mole IX Mycotoxin Dex.
                    <a href="#fnref:10" title="return to article">&nbsp;↩</a>
                </p>
            </li>
            <li id="fn:11">
                <p>
                    Lorem gibson modem hotdog market corrupted Metro Holografix sprawl EMP.
                </p>
                <p>
                    Lorem gibson Kowloon man House of the Blue Lights Turing Registry wristwatch geodesic nodality new yen House of the Blue Lights memory refrigerator advert free-market.
                    <a href="#fnref:11" title="return to article">&nbsp;↩</a>
                </p>
            </li>
            <li id="fn:12">
                <p>
                    Eberhard Wolff: Microservices: Grundlagen flexibler Softwarearchitekturen, dpunkt.verlag, 2015, ISBN 978–3864903137
                    <a href="#fnref:12" title="return to article">&nbsp;↩</a>
                </p>
            </li>
        </ol>
    </div>

    <div class="tooltip">
        <p>
            Lorem gibson spook vinyl ice <a href="#">test</a> icebreaker youtube franchise tanto Cornell singularity.
            Lorem gibson apophenia <b>plastic</b> media chrome silent crypto-dermatrodes Fletcher hacker sign Kowloon dermatrodes order-flow skyscraper math-dead.
        </p>
    </div>
</div>
 
<div style="margin-left: 50px">
    <p>
        Lorem gibson Chiba nano-bridge simstim deck bridge vinyl gentlemen loser courier euro-pop systema.
        Screen assassin computer ice wonton soup Tokyo systemic sprawl jacket nano. <a href="#fn:1" id="fnref:1" title="see footnote" class="footnote">[1]</a> Lorem gibson Chiba nano-bridge simstim deck bridge vinyl gentlemen loser courier euro-pop systema.
        Screen assassin computer ice wonton soup Tokyo systemic sprawl jacket nano.
    </p>

    <div class="footnotes">
        <ol class="footnotes__list">
            <li id="fn:1">
                <p>
                    Lorem gibson courier long-chain hydrocarbons realism bomb otaku SIN tiger-team macroform node dermatrodes tower Chiba City pre-table DIY chrome Mole IX camera People of Importance.
                    Lorem gibson temperfoam sunglasses assault systema tower order-flow screen macroform node tanto sprawl icebreaker drone sentient Mole IX Mycotoxin Dex.
                    <a href="#fnref:1" title="return to article" >&nbsp;↩</a>
                </p>
            </li>
            <li id="fn:2">
                <p>
                    Lorem gibson modem hotdog market corrupted Metro Holografix sprawl EMP.
                </p>
                <p>
                    Lorem gibson Kowloon man House of the Blue Lights Turing Registry wristwatch geodesic nodality new yen House of the Blue Lights memory refrigerator advert free-market.
                    <a href="#fnref:2" title="return to article" >&nbsp;↩</a>
                </p>
            </li>
            <li id="fn:3">
                <p>
                    Eberhard Wolff: Microservices: Grundlagen flexibler Softwarearchitekturen, dpunkt.verlag, 2015, ISBN 978–3864903137
                    <a href="#fnref:3" title="return to article" >&nbsp;↩</a>
                </p>
            </li>
            <li id="fn:4">
                <p>
                    Lorem gibson courier long-chain hydrocarbons realism bomb otaku SIN tiger-team macroform node dermatrodes tower Chiba City pre-table DIY chrome Mole IX camera People of Importance.
                    Lorem gibson temperfoam sunglasses assault systema tower order-flow screen macroform node tanto sprawl icebreaker drone sentient Mole IX Mycotoxin Dex.
                    <a href="#fnref:4" title="return to article" >&nbsp;↩</a>
                </p>
            </li>
            <li id="fn:5">
                <p>
                    Lorem gibson modem hotdog market corrupted Metro Holografix sprawl EMP.
                </p>
                <p>
                    Lorem gibson Kowloon man House of the Blue Lights Turing Registry wristwatch geodesic nodality new yen House of the Blue Lights memory refrigerator advert free-market.
                    <a href="#fnref:5" title="return to article" >&nbsp;↩</a>
                </p>
            </li>
            <li id="fn:6">
                <p>
                    Eberhard Wolff: Microservices: Grundlagen flexibler Softwarearchitekturen, dpunkt.verlag, 2015, ISBN 978–3864903137
                    <a href="#fnref:6" title="return to article" >&nbsp;↩</a>
                </p>
            </li>
            <li id="fn:7">
                <p>
                    Lorem gibson courier long-chain hydrocarbons realism bomb otaku SIN tiger-team macroform node dermatrodes tower Chiba City pre-table DIY chrome Mole IX camera People of Importance.
                    Lorem gibson temperfoam sunglasses assault systema tower order-flow screen macroform node tanto sprawl icebreaker drone sentient Mole IX Mycotoxin Dex.
                    <a href="#fnref:7" title="return to article" >&nbsp;↩</a>
                </p>
            </li>
            <li id="fn:8">
                <p>
                    Lorem gibson modem hotdog market corrupted Metro Holografix sprawl EMP.
                </p>
                <p>
                    Lorem gibson Kowloon man House of the Blue Lights Turing Registry wristwatch geodesic nodality new yen House of the Blue Lights memory refrigerator advert free-market.
                    <a href="#fnref:8" title="return to article" >&nbsp;↩</a>
                </p>
            </li>
            <li id="fn:9">
                <p>
                    Eberhard Wolff: Microservices: Grundlagen flexibler Softwarearchitekturen, dpunkt.verlag, 2015, ISBN 978–3864903137
                    <a href="#fnref:9" title="return to article" >&nbsp;↩</a>
                </p>
            </li>
            <li id="fn:10">
                <p>
                    Lorem gibson courier long-chain hydrocarbons realism bomb otaku SIN tiger-team macroform node dermatrodes tower Chiba City pre-table DIY chrome Mole IX camera People of Importance.
                    Lorem gibson temperfoam sunglasses assault systema tower order-flow screen macroform node tanto sprawl icebreaker drone sentient Mole IX Mycotoxin Dex.
                    <a href="#fnref:10" title="return to article" >&nbsp;↩</a>
                </p>
            </li>
            <li id="fn:11">
                <p>
                    Lorem gibson modem hotdog market corrupted Metro Holografix sprawl EMP.
                </p>
                <p>
                    Lorem gibson Kowloon man House of the Blue Lights Turing Registry wristwatch geodesic nodality new yen House of the Blue Lights memory refrigerator advert free-market.
                    <a href="#fnref:11" title="return to article" >&nbsp;↩</a>
                </p>
            </li>
            <li id="fn:12">
                <p>
                    Eberhard Wolff: Microservices: Grundlagen flexibler Softwarearchitekturen, dpunkt.verlag, 2015, ISBN 978–3864903137
                    <a href="#fnref:12" title="return to article" >&nbsp;↩</a>
                </p>
            </li>
        </ol>
    </div>

    <div class="tooltip">
        <p>
            Lorem gibson spook vinyl ice <a href="#">test</a> icebreaker youtube franchise tanto Cornell singularity.
            Lorem gibson apophenia <b>plastic</b> media chrome silent crypto-dermatrodes Fletcher hacker sign Kowloon dermatrodes order-flow skyscraper math-dead.
        </p>
    </div>
</div>
 
/* No context defined. */
  • Content: 
    .footnote {
  @extend %link-unstyled;
  @extend %heading-font-regular;

  line-height: 1;
  color: $footnote-link-color;
}

.footnotes__list {
  @extend %list-unstyled;

  counter-reset: number;

  > * + * {
    margin-top: $spacer-md;
  }

  li,
  li > p {
    @extend %heading-font-regular;

    font-size: $font-size-xxs;
    line-height: $paragraph-line-height;

    /* stylelint-disable-next-line selector-max-compound-selectors */
    > * + * {
      margin-top: $spacer-sm;
    }
  }

  li {
    position: relative;
    padding-left: $spacer-sm;

    &::before {
      @extend %heading-font-bold;

      content: counter(number);
      counter-increment: number;

      position: absolute;
      left: -0.5rem;

      width: $spacer-sm;

      color: $footnote-index-color;
      text-align: right;
    }

    a {
      @extend %link-unstyled;

      color: $footnote-link-color;
      word-break: break-all;
    }
  }
}

.tooltip {
  max-width: 90%;
  padding: $spacer-lg $spacer-md;
  background-color: $tooltip-background-color;
  box-shadow: 1px 0 20px 1px $tooltip-shadow-color;

  p {
    @extend %heading-font-regular;

    margin: 0;
    font-size: $font-size-xxs;
  }
}

@media screen and (min-width: $grid-breakpoint-md) {
  .footnotes__list {
    li,
    li > p {
      font-size: $font-size-base;
    }
  }

  .tooltip {
    max-width: 40%;

    p {
      font-size: $font-size-base;
    }
  }
}
  • URL: /components/raw/footnote/_footnote.scss
  • Filesystem Path: components/05-atoms/text/footnote/_footnote.scss
  • Size: 1.4 KB

ACHTUNG! Es fehlt noch das JS für die korrekte Anzeige der Tooltip-Boxen.