如何從不同的組件中設置angular2中的css風格，以便它們可以很好地匹配？

Question

我試圖創建angular2 css的子組件非常適合彼此？這裏是我的問題，當我創建一個子組件，然後我打電話給我的與選擇元件，我的CSS是不是藏在身旁我選擇組件的其他組件更大，這裏是我的項目structur：

然後在這裏是我的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; 
    } 

如何讓我的工具提示得到選擇器區域之外，如果工具提示框很大，並有很多內容？

UPDATE： 你們可以只專注於這個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和父（S）有overflow: hidden風格，你必須使用fixed該位置，它會難以管理。在這種情況下，我可以建議更好的jQuery插件爲此：

我會與Tooltipster如果我是你。它有很多自定義選項。希望這可以幫助你。