如何从不同的组件在angular2中设置CSS样式，以便它们彼此完全匹配？

Question

i trying to create a sub component of angular2 css well suited each other? here is my problem, when i create a sub component and then i called my component with the selector, my css that bigger than the other component hidden in side my selector component, here is my project structur :

then here is my 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>

that's how i call my sub component, then here is come my problem

here is the look of my tooltip html get hidden in side the component, here is my 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;
    }

how can i make my tooltip get outside the selector area if the tooltip box is big and have many content in it?

UPDATE : you guys can just focus on this css code, here is how i use to create a tooltip

.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;
}

and here is my 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>

Notes : i use ks-swiper-slide for the slider, can be the ks-swiper-slide is the problem?

Answer 1

The thing is your tooltip is inside .offer--carousel and it will not get outside its parent if you use absolute and the parent(s) has a style of overflow: hidden as the position you have to use fixed for that and it will harder to manage . In this case, can I suggest a better jQuery plugin for this:

I will go with Tooltipster if I were you. It has many customize option as well.Hope this helps you ty.