<div class="Prose u-layout-prose u-padding-all-xxl">
    <p>
        Est maxime voluptatem dolor animi cumque eum. Aut voluptatibus eum facilis labore quia voluptatem est. Et quia est ea voluptatem voluptas ad sint omnis. Facere quisquam error ipsam libero. Ut veniam inventore hic rerum et consequuntur velit deleniti.
        Enim sit maxime. Reiciendis maiores pariatur doloremque est vel et. Eos autem sunt voluptatum. Qui consequatur deleniti ut laboriosam et qui aut. Reiciendis iure cupiditate veniam aut recusandae explicabo.

        <span class="Tooltip Tooltip--styled fr-tooltip js-fr-tooltip">
      <span class="Tooltip-toggle js-fr-tooltip-toggle">unde</span>
        <span class="Tooltip-tooltip fr-tooltip-tooltip js-fr-tooltip-tooltip">
        Culpa aut voluptas quis aut minus magni nostrum aut. Aut possimus rerum qui soluta eum et. Labore maiores cumque explicabo reiciendis mollitia aliquid beatae. Voluptate vero repudiandae eos nulla quod commodi qui. Facilis quidem exercitationem adipisci nesciunt dolorum recusandae.
 
Adipisci esse ad earum neque et deleniti. Sint laboriosam quod et quia numquam voluptates beatae non. Illum autem quas. Soluta quaerat praesentium voluptates reiciendis aut in deleniti rem.
 
Recusandae consequuntur expedita incidunt magni dolor quas. Dignissimos repellendus quia quas nihil. Ex voluptatum sapiente est placeat possimus nihil eaque recusandae aperiam. Nihil aut occaecati alias autem ab consequuntur fuga sed.
      </span>
        </span>
        Atque libero perspiciatis hic. Aliquid ab minima libero excepturi minima qui. Ratione labore molestias veritatis aut voluptatibus nihil voluptatibus porro et. Eos et temporibus doloremque omnis expedita aut hic enim. Vero ut voluptatem exercitationem
        odit voluptas ut aut.
    </p>
</div>
  • Content:
    /** @define Tooltip */
    
    :root {
      --Tooltip-color: #b4efef;
    }
    
    .Tooltip--styled .Tooltip-tooltip {
      @extend .u-padding-all-s;
      @extend .u-zindex-max;
      @extend .u-borderShadow-xxl;
      @extend .u-background-white;
    
      border: 3px solid var(--Tooltip-color);
      left: 50%;
      max-width: 40em;
      min-height: 60%;
      overflow: auto;
      position: fixed !important;
      top: 50%;
      transform: translateX(-50%) translateY(-40%);
      width: 60%;
    }
    
    .Tooltip--styled .Tooltip-toggle {
      background: var(--Tooltip-color);
      border-bottom: 1px dotted color(var(--Tooltip-color) l(-70%));
      cursor: help;
    }
    
    /* .Tooltip--styled .Tooltip-tooltip::after {
      border: solid transparent;
      border-color: transparent;
      border-top-color: var(--Tooltip-color);
      border-width: 1em;
      bottom: -2em;
      content: "";
      height: 0;
      left: 50%;
      margin-left: -1em;
      position: absolute;
      width: 0;
    } */
    
    /* .Tooltip--styled .Tooltip-tooltip::before {
      border: solid transparent;
      border-color: transparent;
      border-top-color: white;
      border-width: 0.5em;
      bottom: -1em;
      content: "";
      height: 0;
      left: 50%;
      margin-left: -0.5em;
      position: absolute;
      width: 0;
      z-index: 9999;
    } */
    
  • URL: /components/raw/tooltip/index.css
  • Filesystem Path: src/modules/tooltip/index.css
  • Size: 1.2 KB
  • Content:
    import Frtooltip from 'fr-tooltip'
    
    /* eslint-disable no-unused-vars */
    
    import stylesheet from 'fr-tooltip/tooltip.css'
    
    /* eslint-enable */
    
    const opts = {
      // String - Container selector, hook for JS init() method
      selector: '.js-fr-tooltip',
    
      // String - Selector to define the tooltip element
      tooltipSelector: '.js-fr-tooltip-tooltip',
    
      // String - Selector to define the toggle element controlling the tooltip
      toggleSelector: '.js-fr-tooltip-toggle',
    
      // String - Prefix for the id applied to each tooltip as a reference for the toggle
      tooltipIdPrefix: 'tooltip',
    
      // String - Class name that will be added to the selector when the component has been initialised
      readyClass: 'fr-tooltip--is-ready'
    }
    
    const tooltip = Frtooltip(opts)
    
    export default {
      tooltip,
      Frtooltip,
      opts
    }
    
  • URL: /components/raw/tooltip/index.js
  • Filesystem Path: src/modules/tooltip/index.js
  • Size: 808 Bytes

There are no notes for this item.