Spartherm

Tooltips 

<div class="container">

    <div class="desc desc-line">Tooltips</div>
    <div class="text-center m-4">
        <p class="mb-5">
            <a href="#" class="" data-toggle="tooltip" data-placement="bottom" title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr">Link mit Tooltip</a>
        </p>
        <div class="row">

            <div class="col-12 col-sm-6 col-xxl-3">
                <button type="button" class="btn btn-flat m-4" data-toggle="tooltip" data-placement="top" title="Lorem ipsum dolor sit amet">
                    Tooltip oben
                </button>

            </div>
            <div class="col-12 col-sm-6 col-xxl-3">
                <button type="button" class="btn btn-flat m-4" data-toggle="tooltip" data-placement="bottom" title="Consetetur sadipscing elitr">
                    Tooltip unten
                </button>
            </div>

        </div>

    </div>
 
<div class="container">

    <div class="desc desc-line">Tooltips</div>
    <div class="text-center m-4">
    <p class="mb-5">
        <a href="#" class="" data-toggle="tooltip" data-placement="bottom"  title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr">Link mit Tooltip</a>
    </p>
    <div class="row">

        <div class="col-12 col-sm-6 col-xxl-3">
            <button type="button" class="btn btn-flat m-4" data-toggle="tooltip" data-placement="top" title="Lorem ipsum dolor sit amet">
              Tooltip oben
            </button>

        </div>
        <div class="col-12 col-sm-6 col-xxl-3">
            <button type="button" class="btn btn-flat m-4" data-toggle="tooltip" data-placement="bottom" title="Consetetur sadipscing elitr">
              Tooltip unten
            </button>
        </div>

    </div>

</div>
 
/* Kein Inhalt definiert. */
  • Inhalt: 
    .tooltip {
  font-weight: $font-weight-light;
  &-inner {
    text-align: left;
  }
  .dark & {
    color: $white;
    &-inner {
      background-color: $secondary;
    }
  }
}

.dark {
  .bs-tooltip-auto[x-placement^=bottom], .bs-tooltip-bottom .arrow {
    &:before {
      border-bottom-color: $secondary;
    }
  }
  .bs-tooltip-auto[x-placement^=top], .bs-tooltip-top .arrow {
    &:before {
      border-top-color: $secondary;
    }
  }
  .bs-tooltip-auto[x-placement^=right], .bs-tooltip-right .arrow {
    &:before {
      border-right-color: $secondary;
    }
  }
  .bs-tooltip-auto[x-placement^=left], .bs-tooltip-left .arrow {
    &:before {
      border-left-color: $secondary;
    }
  }
}
  • URL: /components/raw/tooltips/tooltips.scss
  • Pfad Dateisystem: components\04-components\tooltips\tooltips.scss
  • Größe: 741 Bytes

Keine Notizen vorhanden.