如何從不同的組件在angular2中設置CSS樣式，以便它們彼此完全匹配？

Question

我試圖創建一個適合彼此的angular2 css的子組件？ 這是我的問題，當我創建一個子組件，然后用選擇器調用我的組件時，我的css比隱藏在選擇器組件旁邊的其他組件大，這是我的項目結構：

這是我的home.html：

<div class="row">
  <div class="homecarousel-recent-offer col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <carouselItemsme></carouselItemsme>
  </div>
</div>

這就是我所謂的子組件的方式，那么這就是我的問題

這是隱藏在組件旁邊的我的工具提示html的外觀，這是我的carouselItems.scss：

.carousel-recent-offers {
position:relative;
}

.carousel-recent-offers .next-carousel, .carousel-recent-offers .previous-carousel {
    outline: 0;
    -webkit-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;
    background-color: rgba(234,235,236,0.7);
    height: 100%;
    color: #70747c;
    box-shadow: none;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
    position: absolute;
    top: 0px;
}

    .next-carousel, .previous-carousel{
        box-sizing: border-box;
        padding: 0;
        width: 36px;
        line-height: 38px;
        height: 38px;
        font-size: 14px;
        font-weight: bold;
        color: #70747c;
        text-align: center;
        text-shadow: none;

        z-index: 2;
        border: none;


    }

    .next-carousel {
        right: 0;
    }

    .previous-carousel:hover {
      opacity: 0.5;
    }
    .next-carousel:hover {
      opacity: 0.5;
    }

    .offer--carousel {
        display: inline-block;
        //height: 285px;
        background-color: #ffffff;
        border: 1px solid #d3d3d3;
        border-radius: 2px;
        position: relative;
    }

    /* Tooltip text */
    .offer--carousel .tooltiptext {
        visibility: hidden;
        width: auto;
        background-color: white;
        color: #000000;
        text-align: center;
        padding: 15px;
        border-radius: 6px;

        /* Position the tooltip text - see examples below! */
        position: absolute;
        top: 0px;
        left: 105%; 
        z-index: 9000;
    }

    .offer--carousel .tooltiptext::after {
        content: " ";
        position: absolute;
        top: 50%;
        right: 100%;
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent white transparent transparent;
    }

    .offer--carousel:hover .tooltiptext {
        visibility: visible;
    }

    a img {
        width: 100%;
        height: 140px;
    }

    .offer--carousel .offer__details {
        padding: 10px;
    }

    .offer--carousel .offer__title {
        max-height: 40px;
        color: #006cb7;
        font-size: 14px;
        font-weight: normal;
        line-height: 20px;
        text-overflow: inherit;
        white-space: normal;
    }

    .offer__title, .offer__subtitle {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .offer__subtitle {
        color: #212121;
    }

.rating--carousel
    .rating--carousel .rating__reviews {
        color: #b9bcc2 !important;
    }
    .rating__value, .rating__reviews {
        display: block;
    }
    .rating--carousel .rating__value, .rating--carousel .rating__reviews {
        color: #212121;
        font-size: 14px;
        font-weight: normal;
    }

    .price--mini-dark {
        top: 1px;
        right: 1px;
        padding: 5px;
        color: #ffffff;
        background-color: rgba(2,21,33,0.8);
        position: absolute;
        text-align: right;
    }
    .price--mini-dark .price__tag {
        font-size: 20px;
        color: #ffffff;
    }
    .price--mini-dark .price__info {
        font-size: 12px;
        line-height: 1.5;
    }

如果工具提示框很大並且其中包含很多內容，我該如何使工具提示移出選擇器區域？

更新：你們可以只專注於此CSS代碼，這是我用來創建工具提示的方式

.offer--carousel {
    display: inline-block;
    //height: 285px;
    background-color: #ffffff;
    border: 1px solid #d3d3d3;
    border-radius: 2px;
    position: relative;
}

.offer--carousel .tooltiptext {
    visibility: hidden;
    width: auto;
    background-color: white;
    color: #000000;
    text-align: center;
    padding: 15px;
    border-radius: 6px;

    position: absolute;
    top: 0px;
    left: 105%; 
    z-index: 9000;
}

.offer--carousel .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent white transparent transparent;
}

.offer--carousel:hover .tooltiptext {
    visibility: visible;
}

這是我的carouselItems.html

<ks-swiper-slide *ngFor="let s of data; let i = index" >
    <a class="offer--carousel" [routerLink]="['/course-detail', s._id]" routerLinkActive="active">
      <div class="offer-image__column">
        <img [src]="s.courseLandingPage.course_image">
      </div>
      <div class="offer-details__column">
        <div class="offer__details">
          <h3 class="offer__title">
            {{s.courseLandingPage.course_title}}
          </h3>
          <div class="offer__subtitle">
            {{s.courseLandingPage.course_subtitle}}
          </div>
          <div class="offer__rating">
            <div class="rating--carousel">
              <span class="rating__value">9.4 Excellent</span>
              <span class="rating__reviews">(44 reviews)</span>
            </div>
          </div>
        </div>
        <div class="price--mini-dark">
          <div class="price__tag">
            {{s.price_coupons.price}}
          </div>
        </div>
      </div>
      <div class="tooltiptext">
        <div>ksadjfkljsalfjdsakldfa</div>
        <div>ksadjfkljsalfjdsakldfa</div>
        <div>ksadjfkljsalfjdsakldfa</div>
        <div>ksadjfkljsalfjdsakldfa</div>
        <div>ksadjfkljsalfjdsakldfa</div>
        <div>ksadjfkljsalfjdsakldfa</div>
        <div>ksadjfkljsalfjdsakldfa</div>
        <div>ksadjfkljsalfjdsakldfa</div>
        <div>ksadjfkljsalfjdsakldfa</div>
        <div>ksadjfkljsalfjdsakldfa</div>
        <div>ksadjfkljsalfjdsakldfa</div>
        <div>ksadjfkljsalfjdsakldfa</div>
        <div>ksadjfkljsalfjdsakldfa</div>
        <div>ksadjfkljsalfjdsakldfa</div>
        <div>ksadjfkljsalfjdsakldfa</div>
        <div>ksadjfkljsalfjdsakldfa</div>
        <div>ksadjfkljsalfjdsakldfa</div>
        <div>ksadjfkljsalfjdsakldfa</div>
        <div>ksadjfkljsalfjdsakldfa</div>
        <div>ksadjfkljsalfjdsakldfa</div>
        <div>ksadjfkljsalfjdsakldfa</div>
        <div>ksadjfkljsalfjdsakldfa</div>
        <div>ksadjfkljsalfjdsakldfa</div>
        <div>ksadjfkljsalfjdsakldfa</div>
        <div>ksadjfkljsalfjdsakldfa</div>
        <div>ksadjfkljsalfjdsakldfa</div>
      </div>
    </a>
</ks-swiper-slide>

注意：我將ks-swiper-slide用於滑塊，請問ks-swiper-slide是問題嗎？

Answer 1

關鍵是您的工具提示位於.offer--carousel內部，如果您使用absolute ，並且父代具有overflow: hidden樣式，它將不會超出其父代 overflow: hidden為您必須為此使用fixed的位置，它將難以管理 。 在這種情況下，我可以為此建議一個更好的jQuery插件 ：

如果我是我，我將選擇Tooltipster 。 它還具有許多自定義選項。希望這可以幫助您。