JSFiddle - React, Tailwind, and code Playground

by Talsja

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="tooltip bs-tooltip-top" role="tooltip" style="display:block;opacity:1">
		<div class="arrow"></div>
		<div class="tooltip-inner">
			Some tooltip text!
		</div>
	</div>
		
	<br><br>	
	<br><br>
	<br><br>
	

	<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

SCSS

$base-font: 'Roboto',  sans-serif;


// Base class
.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  margin: 0;  
  font-family: $base-font;
  // We deliberately do NOT reset font-size or word-wrap.
  font-style: normal;
  font-weight: normal;
  line-height: 1.5;
  text-align: left; // Fallback for where `start` is not supported
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;  
  font-size:1rem;
  word-wrap: break-word;
  opacity: 0;

  &.show { opacity: .9; }

  .arrow {
    position: absolute;
    display: block;
    width: .8rem;
    height: .4rem;

    &::before {
      position: absolute;
      content: "";
      border-color: transparent;
      border-style: solid;
    }
  }
}

.bs-tooltip-top {
  padding: .4rem 0;

  .arrow {
    bottom: 0;

    &::before {
      top: 0;
      border-width: .4rem (.8rem / 2) 0;
      border-top-color: tomato;
    }
  }
}

.bs-tooltip-right {
  padding: 0 .4rem;

  .arrow {
    left: 0;
    width: .4rem;
    height: .8rem;

    &::before {
      right: 0;
      border-width: (.8rem / 2) .4rem (.8rem / 2) 0;
      border-right-color: tomato;
    }
  }
}

.bs-tooltip-bottom {
  padding: .4rem 0;

  .arrow {
    top: 0;

    &::before {
      bottom: 0;
      border-width: 0 (.8rem / 2) .4rem;
      border-bottom-color: tomato;
    }
  }
}

.bs-tooltip-left {
  padding: 0 .4rem;

  .arrow {
    right: 0;
    width: .4rem;
    height: .8rem;

    &::before {
      left: 0;
      border-width: (.8rem / 2) 0 (.8rem / 2) .4rem;
      border-left-color: tomato;
    }
  }
}

.bs-tooltip-auto {
  &[x-placement^="top"] {
    @extend .bs-tooltip-top;
  }
  &[x-placement^="right"] {
    @extend .bs-tooltip-right;
  }
  &[x-placement^="bottom"] {
    @extend .bs-tooltip-bottom;
  }
  &[x-placement^="left"] {
    @extend .bs-tooltip-left;
  }
}

// Wrapper for the...

JavaScript

$('[data-toggle="tooltip"], [data-tooltip="tooltip"], .tip').tooltip();