Javascript 如何从不同的组件在angular2中设置css样式，以便它们能够很好地相互匹配？

我试图创建一个子组件angular2 css非常适合对方？这是我的问题，当我创建一个子组件，然后用选择器调用我的组件时，我的css比隐藏在选择器组件中的另一个组件大，这是我的项目结构：

下面是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>

如果工具提示框很大且包含许多内容，如何使工具提示超出选择器区域

更新： 你们可以关注这个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>

{{s.courseLandingPage.course_title}
{{s.courseLandingPage.courseu subtitle}
9.4优秀
（44次审查）
{{s.price_优惠券.price}}
ksadjfkljsalfjdsakldfa
ksadjfkljsalfjdsakldfa
ksadjfkljsalfjdsakldfa
ksadjfkljsalfjdsakldfa
ksadjfkljsalfjdsakldfa
ksadjfkljsalfjdsakldfa
ksadjfkljsalfjdsakldfa
ksadjfkljsalfjdsakldfa
ksadjfkljsalfjdsakldfa
ksadjfkljsalfjdsakldfa
ksadjfkljsalfjdsakldfa
ksadjfkljsalfjdsakldfa
ksadjfkljsalfjdsakldfa
ksadjfkljsalfjdsakldfa
ksadjfkljsalfjdsakldfa
ksadjfkljsalfjdsakldfa
ksadjfkljsalfjdsakldfa
ksadjfkljsalfjdsakldfa
ksadjfkljsalfjdsakldfa
ksadjfkljsalfjdsakldfa
ksadjfkljsalfjdsakldfa
ksadjfkljsalfjdsakldfa
ksadjfkljsalfjdsakldfa
ksadjfkljsalfjdsakldfa
ksadjfkljsalfjdsakldfa
ksadjfkljsalfjdsakldfa

---

注意：我使用ks swiper slide作为滑块，ks swiper slide是否有问题？

问题是您的工具提示在

中。提供--carousel

并且如果您使用

绝对

和父对象，它将不会超出其父对象有一个

溢出：隐藏的
样式作为你必须使用的
固定的
位置，它将更难管理。在这种情况下，我可以推荐一个更好的jQuery插件吗

如果我是你，我就和你一起去。它也有许多自定义选项。希望这能帮助你。问题是你的工具提示在
里面。提供--carousel
，如果你使用
绝对
和父对象，它不会超出它的父对象有一个
溢出：隐藏的
样式作为你必须使用的
固定的
位置，它将更难管理。在这种情况下，我可以推荐一个更好的jQuery插件吗

如果我是你，我就和你一起去。它也有很多自定义选项。希望这能帮助你。
你是否使用了工具提示插件？@JithinRajPR否我只是CSS我的工具提示，我更新了CSS代码的问题我想你可能会误用工具提示，它应该是一个小的“悬停框”关于悬停在上面的项目的信息。@Vega我认为创建工具提示和悬停框是一样的，因为我是用CSS创建的，对吗？你可以看到我的css和html代码，我刚刚更新了我的question@KeVin，问题是您的工具提示位于
内部。提供--carousel
并且如果您使用
绝对
作为必须使用
固定
的位置，它将不会超出其父级。在这种情况下，我可以推荐一个更好的jQuery插件吗？你是否使用任何插件作为工具提示？@JithinRajPR否我只是CSS我的工具提示，我更新了我的CSS代码问题我想你可能会误用工具提示，它应该是一个小的“悬停框”关于悬停在上面的项目的信息。@Vega我认为创建工具提示和悬停框是一样的，因为我是用CSS创建的，对吗？你可以看到我的css和html代码，我刚刚更新了我的question@KeVin，问题是您的工具提示位于
内部。提供--carousel
并且如果您使用
绝对
作为必须使用
固定
的位置，它将不会超出其父级。在这种情况下，我能推荐一个更好的jQuery插件吗？我认为最好使用angular2插件，在我读到的一些文章中，他们说最好减少jQuery插件的使用，因为其中有一个DOM，首先我不知道如何将jQuery插件集成到angular2中。但你的回答回答了我的问题，我将为anguar2工具提示打开新的问题，谢谢@KeVin还有一件事是，工具提示中有样式为
overflow:hidden的“any parent div”。我认为它们是隐藏这些元素的原因。所以最好使用插件，因为它们的价值是动态的，不会受到任何其他父div的影响。我认为最好使用angular2插件，在我读到的一些文章中，他们说最好减少使用jQuery插件，因为其中有一个DOM，首先我不知道如何将jQuery插件集成到angular2中。但你的回答回答了我的问题，我将为anguar2工具提示打开新的问题，谢谢@KeVin还有一件事是，工具提示中有样式为
overflow:hidden的“any parent div”。我认为它们是隐藏这些元素的原因。所以最好使用插件，因为它们的值是动态的，不会受到任何其他父div的影响。
<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>