如何在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并且父代的样式为{{}，则它不会超出其父 1}}作为您必须使用overflow: hidden的位置，难以管理。在这种情况下，我可以为此建议一个更好的 jQuery插件：

如果我是你，我会和Tooltipster一起去。它也有很多自定义选项。希望这有助于你。