Aeroporto di Bologna - Design System

Tooltip: Telepass 

<span class="c-tooltip--telepass " data-js-tooltip-label="Espandi le informazioni relative al telepass" data-js-tooltip-img=../../images/svgs/telepass_tooltip.svg data-js-bubble-class-position="c-tooltip__bubble--up">
    <span class="c-tooltip__outer-text">pagamento con:</span>
    <div data-toggletip>
        <button class="close-tooltip" aria-label="Chiudi il suggerimento sul telepass" aria-hidden="true">
            <svg class="c-icon c-icon--24">
                <use xlink:href="#ic_close_black_24px"></use>
            </svg> </button>
        <p>
            <strong>Accedi e paga con Telepass</strong>
            Per questa prenotazione hai deciso di utilizzare il tuo Telepass numero<br>
            <strong>000000000000000.</strong>
        </p>
        <a href='#'>Scopri di più ➝</a>
    </div>

</span>
 
<span class="c-tooltip--telepass {{ modifier }}"
  data-js-tooltip-label="Espandi le informazioni relative al telepass"
  data-js-tooltip-img={{ path "/images/svgs/telepass_tooltip.svg" }}
  data-js-bubble-class-position="c-tooltip__bubble--up"
>
  <span class="c-tooltip__outer-text">pagamento con:</span>
    <div data-toggletip>
      <button class="close-tooltip" aria-label="Chiudi il suggerimento sul telepass" aria-hidden="true">
        {{> @icon symbol="ic_close_black_24px" class="c-icon c-icon--24" }}
      </button>
      <p>
        <strong>Accedi e paga con Telepass</strong>
        Per questa prenotazione hai deciso di utilizzare il tuo Telepass numero<br>
        <strong>000000000000000.</strong>
      </p>
      <a href='#'>Scopri di più ➝</a>
    </div>
    
</span>
 
{
  "tooltip_aria_label": "Espandi per sapere di più",
  "tooltip_exposed_icon": "ic_info_black_24px",
  "tooltip_exposed_text": null,
  "__comment__tooltip_exposed_img": "/images/qrcode.jpg",
  "tooltip_position_class": "c-tooltip__bubble--down",
  "bubble_text": "Qui va il contenuto aggiuntivo",
  "text": "<small><strong>Dove trovo il mio QR-code per accedere al parcheggio?</strong></small>"
}
  • Content: 
    /* 
  Source: https://inclusive-components.design/tooltips-toggletips/ (Heydon Pickering)
  NB: The DOM is built in tooltip.js in progressive enhancement
*/

$tooltip-bubble-color: primary(night, 100);

.c-tooltip {
  position: relative;
  display: inline-block;

  .c-form__alone--createpsw & {
    top: remify(15px);
    position: absolute;
    right: remify(-8px);
  }

  span {
    .c-product__price & {
      text-transform: initial;
    }
  }

}

.c-tooltip button {
  background: none;
  border: none;
  margin-top: 0;
  display: flex;
  padding: 0;

  svg {
    width: remify(18px);
    height: remify(18px);

    * {
      .c-form__alone--createpsw &,
      .c-form--outstanding & {
        fill: primary(night, 40);
      }
    }

  }

  .c-form__alone--createpsw & {
    margin-top: 0 !important;
  }

}

/* the bubble element, added inside the toggletip live region */

.c-tooltip__bubble {
  display: inline-block;
  position: absolute;
  width: remify(200px);
  padding: remify(8px);
  background: $tooltip-bubble-color;
  color: #fff;
  border-radius: remify(4px);
  font-size: remify(12px);
  line-height: 1.5;
  z-index: $zIndex-tooltipBubble;

  strong {
    .c-form__alone--createpsw & {
      display: block;
      font-size: remify(16px);
    } 
  }

  .split-payment & {
    @include min-screen( bp(tablet) ){
      width: remify(320px);
    }
  }

}

  .c-tooltip__bubble--down {
    left: 50%;
    top: 130%;
    transform: translateX(-50%);

    &:before {
      content: "";
      position: absolute;
      @include css-triangle("up", remify(12px), $tooltip-bubble-color);
      top: remify(-24px);
      left: 50%;
      transform: translateX(-50%);

      .c-form__alone--createpsw & {
        left: initial;
        transform: initial;
        right: remify(4px);
        @include min-screen( bp(tablet-l) ){
          left: 50%;
          transform: translateX(-50%);
          right: initial;
        }
      }
    }

    .c-form__alone--createpsw & {
      padding: remify(24px);
      left: initial;
      top: remify(32px);
      transform: initial;
      right: 0;
      width: 90vw;
      max-width: remify(330px);
      font-size: 75%;
      line-height: 1.333;
      @include min-screen( bp(tablet-l) ){
        left: 50%;
        transform: translateX(-50%);
        right: initial;
      }
    }

  }
  .c-tooltip__bubble--up {
    left: 50%;
    bottom: 160%;
    transform: translateX(-50%);
    &:before{
      content: "";
      position: absolute;
      @include css-triangle("down", remify(12px), $tooltip-bubble-color);
      bottom: remify(-24px);
      left: 50%;
      transform: translateX(-50%);
    }
  }

  
  .c-tooltip__bubble--right {
    left: 135%;
    top: 38%;
    transform: translateY(-50%);
    &:before{
      content: "";
      position: absolute;
      @include css-triangle("left", remify(12px), $tooltip-bubble-color);
      top: 50%;
      left: remify(-24px);
      transform: translateY(-50%);
    }
  }
  .c-tooltip__bubble--left {
    right: 135%;
    top: 38%;
    transform: translateY(-50%);
    &:before{
      content: "";
      position: absolute;
      @include css-triangle("right", remify(12px), $tooltip-bubble-color);
      top: 50%;
      right: remify(-24px);
      transform: translateY(-50%);
    }
  }

/*------------------------------------*\
  QR Code modifier
\*------------------------------------*/

.c-tooltip--qrcode {
  @include font-scale(level-1);
  display: flex;
  align-items: center;
  gap: remify(8px);

  button {
    color: primary(sky, 100);
    // text-decoration: underline;
  }

  .close-tooltip {
    position: absolute;
    right: 0;
    top: remify(5px);
    svg * {
      fill: primary(sky, 40);
    }
  }

  img {

    width: remify(48px);

    @include min-screen( remify(1080px) ) {
      width: remify(140px);

      .c-product--myblq & {
        width: remify(120px);
      }

    }

  }

	.c-product--myblq.qrcode-p-express & img {
		
		@include min-screen( bp(phone-l) ) {
      width: remify(140px);

      .c-product--myblq & {
        width: remify(120px);
      }

    }
	}

  .c-tooltip__bubble {
    background-color: primary(sun, 10);
    color: #000;
    font-size: 100%;
    padding: remify(16px);
    width: remify(300px);
    @include shadow('medium');

    p {
      display: block;
      margin-bottom: remify(24px);
      text-align: center;
      font-size: remify(14px);
    }

    h5 {
      display: block;
      text-align: center;
      font-size: remify(16px);
      margin-bottom: remify(8px);
    }

  }

  .c-tooltip__bubble--up {
    transform: translateX(-87%);
    bottom: 135%;

    &:before {
      @include css-triangle("down", remify(12px), #fff);
      left: initial;
      transform: initial;
      right: 9%;
      @include min-screen( remify(1080px) ) {
        left: 50%;
        transform: translateX(-50%);
      }
    }

    @include min-screen( remify(1080px) ) {
      bottom: 115%;
      transform: translateX(-50%);
    }

  }

  ul {
    display: flex;
    justify-content: space-around;

    img {
      width: remify(110px);
    }

  }

}

/*------------------------------------*\
  Bill modifier
\*------------------------------------*/

.c-tooltip--bill {

  .c-tooltip__bubble {
    width: remify(260px);
  }

  dl {
    display: flex;
    flex-wrap: wrap;
  }

  dt, dd {
    margin-bottom: remify(8px);
  }

  dt {
    flex-basis: 65%;
    text-align: left;
  }

  dd {
    flex-basis: 35%;
    font-weight: fw(bold);
    text-align: right;
  }

  dt.total {
    font-weight: fw(bold);
  }

  dt.total, dd.total {
    font-size: 125%;
    border-top: remify(1px) solid #fff;
    padding-top: remify(8px);
    margin-top: remify(8px);
  }

}

/*------------------------------------*\
  telepass modifier
\*------------------------------------*/

.c-tooltip--telepass {
  position: relative;
  text-align: center;

  .close-tooltip {
    position: absolute;
    right: 0;
    top: remify(5px);

    svg * {
      fill: primary(sky, 40);
    }

  }

  button {
  width: 100%;
  margin: 0 auto;

    @include min-screen( remify(1080px) ) {
      width: remify(140px);
    }

  }

  .c-tooltip__bubble {
    background-color: #fff;
    color: #000;
    font-size: 100%;
    padding: remify(16px);
    width: remify(300px);
    @include shadow('medium');
    text-align: center;

    p {
      font-size: 75%;
      display: block;
      margin-bottom: remify(24px);
    }

    strong {
      display: block;
      font-size: remify(16px);
      margin-bottom: remify(8px);
    }

  }

  .c-tooltip__bubble--up {
    transform: translateX(-87%);
    bottom: 135%;

    &:before {
      @include css-triangle("down", remify(12px), #fff);
      left: initial;
      transform: initial;
      right: 9%;
      @include min-screen( remify(1080px) ) {
        left: 50%;
        transform: translateX(-50%);
      }
    }

    @include min-screen( remify(1080px) ) {
      bottom: 115%;
      transform: translateX(-50%);
    }

  }

  ul {
    display: flex;
    justify-content: space-around;

    img {
      width: remify(110px);
    }

  }

  .c-tooltip__outer-text {
    font-size: 75%;
    text-align: center;
    margin-bottom: remify(8px);
    text-transform: uppercase;
  }

  .close-tooltip {
    width: auto;
  }

}

/*------------------------------------*\
  QR Code-text modifier
\*------------------------------------*/

.c-tooltip--qrcode-text {
  margin: remify(12px) 0;
  text-transform: initial;

  .c-tooltip {
    top: remify(4px);
  }
}


/*------------------------------------*\
  24h modifier
\*------------------------------------*/

.c-tooltip--24h {
  position: relative;
  text-align: center;
  vertical-align: text-top;

  button {
    padding: 0;
  }

  .c-icon {
    fill: primary(sun, 100);
  }

  .c-superhero--parkings & .c-icon {
    fill: status(warning);
  }

  .c-tooltip__bubble {
    background-color: #fff;
    color: secondary(text,100);
    font-weight: fw(regular);
    text-transform: none;
    font-size: 100%;
    padding: remify(16px);
    width: remify(300px);
    text-align: center;
    @include shadow('medium');

    strong {
      display: block;
      margin-bottom: remify(16px);
      font-weight: fw(bold);
    }
  }


  .c-tooltip__bubble--up {
    &:before {
      @include css-triangle("down", remify(12px), #fff);
    }
  }
}
  • URL: /components/raw/tooltip/_tooltip.scss
  • Filesystem Path: src/views/02-molecules/tooltip/_tooltip.scss
  • Size: 8.3 KB
  • Content: 
    /* 
  Source: https://inclusive-components.design/tooltips-toggletips/ (Heydon Pickering)
*/

(function() {
  // Get all the toggletip buttons
  var toggletipTexts = document.querySelectorAll('[data-toggletip]');

  // Iterate over them
  Array.prototype.forEach.call(toggletipTexts, function(toggletipText) {
    // Create the container element
    var container = document.createElement('span');
    container.setAttribute('class', 'c-tooltip');
    
    // Put it before the original element in the DOM
    toggletipText.parentNode.insertBefore(container, toggletipText);
    
    // Create the button element
    var toggletip = document.createElement('button');

    // Check the data attributes
    var tooltip_aria_label = toggletipText.parentElement.getAttribute('data-js-tooltip-label');
    var tooltip_exposed_icon = toggletipText.parentElement.getAttribute('data-js-tooltip-icon');
    var tooltip_exposed_text = toggletipText.parentElement.getAttribute('data-js-tooltip-text');
    var tooltip_exposed_img = toggletipText.parentElement.getAttribute('data-js-tooltip-img');
    // Get the class to give to bubble for its positioning
    var tooltip_bubble_pos_class = toggletipText.parentElement.getAttribute('data-js-bubble-class-position');

    toggletip.setAttribute('type', 'button');
    toggletip.setAttribute('aria-label', tooltip_aria_label);
    toggletip.setAttribute('data-toggletip-content', toggletipText.innerHTML);
    
    // Check if is icon or text
    if (tooltip_exposed_icon) {
      toggletip.innerHTML = '<svg class="c-icon"><use xlink:href="#' + tooltip_exposed_icon + '" /></svg>';
    } else if ( tooltip_exposed_text ) {
      toggletip.textContent = tooltip_exposed_text ;
    } else if (tooltip_exposed_img) {
      toggletip.innerHTML = '<img src="' + tooltip_exposed_img + '" alt="" />';
    }

    // Place the button element in the container
    container.appendChild(toggletip);
    
    // Create the live region
    var liveRegion = document.createElement('span');
    liveRegion.setAttribute('role', 'status');
    
    // Place the live region in the container
    container.appendChild(liveRegion);
    
    // Remove the original element
    toggletipText.parentNode.removeChild(toggletipText);
    
    // Build `data-tooltip-content` 
    var message = toggletip.getAttribute('data-toggletip-content');
    toggletip.setAttribute('data-toggletip-content', message);
    toggletip.removeAttribute('title');

    // Get the message from the data-content element
    var message = toggletip.getAttribute('data-toggletip-content');

    // Get the live region element
    var liveRegion = toggletip.nextElementSibling;

    // Toggle the message
    toggletip.addEventListener('click', function() {
        liveRegion.innerHTML = '';
        window.setTimeout(function() {
          liveRegion.innerHTML = '<span class="c-tooltip__bubble '+ tooltip_bubble_pos_class +'">'+ message +'</span>';
        }, 100);
    });

    // Close on outside click
    document.addEventListener('click', function (e) {
      if (toggletip !== e.target) {
        liveRegion.innerHTML = '';
      }                        
    });

    // Remove toggletip on ESC
    toggletip.addEventListener('keydown', function(e) {
      if ((e.keyCode || e.which) === 27)
      liveRegion.innerHTML = '';
    });
  });
}());
  • URL: /components/raw/tooltip/tooltip.js
  • Filesystem Path: src/views/02-molecules/tooltip/tooltip.js
  • Size: 3.3 KB

No notes defined.