:global {
  .tooltip-examples-container {
  
    .Tooltip {
      .tooltip-target {
        position: relative;
        width: 150px;
        background-color: #999;
        height: 150px;
        margin: 10px;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        text-align: center;
        padding: 15px;
  
        &#tooltip-1 {
        }
  
        &#tooltip-2 {
          width: 50%;
          background-color: #C00;
        }
  
        &#tooltip-3 {
          margin-left: 25%;
          background-color: #CC0;
  
        }
  
        &#tooltip-4 {
          margin-left: 50%;
          background-color: #0C0;
        }
  
        &#tooltip-5 {
          margin-left: 75%;
          background-color: #00C;
        }
  
        &#tooltip-6 {
          margin-left: calc(100% - 200px);
          padding: 0;
          height: 200px;
          width: 200px;
        }
  
        &#tooltip-7, &#tooltip-8 {
          background-color: steelblue;
          height: 200px;
          width: 200px;
        }
      }
      //custom theme
      &.blue-round {
        .tooltip-content-container {
          background-color: #0000CC;
          border: 3px solid #000;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          border-radius: 50%;
          .tooltip-pointer {
            background-color: #0000CC;
          }
          .tooltip-body {
            color: #FFF;
          }
        }
      }
    }
  }
}