JSFiddle - React, Tailwind, and code Playground

by qwweee7467

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<i class="fa fa-question-circle fa-c0"></i>

<i class="fa fa-question-circle fa-c1"></i>

<i class="fa fa-question-circle fa-c2"></i>

<i class="fa fa-question-circle fa-c3"></i>

<i class="fa fa-question-circle fa-c4"></i>

<i class="fa fa-question-circle fa-c5"></i>

<i class="fa fa-question-circle fa-c6"></i>

<i class="fa fa-question-circle fa-c7" style="border:1px solid red;"></i>

<i class="fa fa-question-circle fa-c8"></i>

<i class="fa fa-question-circle fa-c9"></i>

<i class="fa fa-question-circle fa-c10"></i>

<i class="fa fa-question-circle fa-c11"></i>

<i class="fa fa-question-circle fa-c12"></i>

<i class="fa fa-question-circle fa-c13"></i>

<i class="fa fa-question-circle fa-c14"></i>

<i class="fa fa-question-circle fa-c15"></i>

<hr/>
<div class="search-name-tooltip" data-toggle="tooltip1" data-placement="top"><i class="fa fa-question-circle fa-c7"></i>LightBlue(BK)+DarkBlue(font)</div>
<hr/>
<div class="search-name-tooltip" data-toggle="tooltip2" data-placement="top"><i class="fa fa-question-circle fa-c7"></i>LightBlue(BK)+Blue(font)</div>
<hr/>
<div class="search-name-tooltip" data-toggle="tooltip3" data-placement="top"><i class="fa fa-question-circle fa-c7"></i>LightBlue(BK)+DarkSlateBlue(font)</div>
<hr/>
<div class="search-name-tooltip" data-toggle="tooltip4" data-placement="top"><i class="fa fa-question-circle fa-c7"></i>LightBlue(BK)+MediumBlue(font)</div>

CSS

.fa {
    font-size:30px;
}
.fa-c0:before {
    color: blue;
}
.fa-c1:before {
    color: #003D66;
}
.fa-c2:before {
    color: #004C80;
}
.fa-c3:before {
    color: #005C99;
}
.fa-c4:before {
    color: #006BB2;
}
.fa-c5:before {
    color: #007ACC;
}
.fa-c6:before {
    color: #008AE6;
}
.fa-c7:before {
    color: #0099FF;
}
.fa-c8:before {
    color: #19A3FF;
}
.fa-c9:before {
    color: #33ADFF;
}
.fa-c10:before {
    color: #4DB8FF;
}
.fa-c11:before {
    color: #66C2FF;
}
.fa-c12:before {
    color: #80CCFF;
}
.fa-c13:before {
    color: #99D6FF;
}
.fa-c14:before {
    color: #B2E0FF;
}
.fa-c15:before {
    color: lightblue;
}
.tooltip-inner {
    max-width: 900px;
    width: 590px;
    background-color: #565656;
}
.tooltip-inner > div {
    text-align: left;
    color: white;
    font-size:14px;
    margin:4px 0;
}
.CUSTOM-CLASS1 .tooltip-inner {
    background-color: LightBlue;
}
.CUSTOM-CLASS1 .tooltip-inner > div {
    color:DarkBlue;
}
.CUSTOM-CLASS2 .tooltip-inner {
    background-color: LightBlue;
}
.CUSTOM-CLASS2 .tooltip-inner > div {
    color:Blue;
}
.CUSTOM-CLASS3 .tooltip-inner {
    background-color: LightBlue;
}
.CUSTOM-CLASS3 .tooltip-inner > div {
    color:DarkSlateBlue;
}
.CUSTOM-CLASS4 .tooltip-inner {
    background-color: LightBlue;
}
.CUSTOM-CLASS4 .tooltip-inner > div {
    color:MediumBlue;
}

JavaScript

/* NABU Portal Tooltip sample */

var tooltipMsg = '<div>The asterisk (*) can be used as a wildcard when you know only part of the account name.</div><div> USA <span style="color:red;">*</span> - will return all accounts that begin with USA (USA Jobs, USA Boxes, etc).</div><div> <span style="color:red;">*</span> USA - will return all accounts that end with USA (Air USA, Bikes USA, etc).  </div>';


$(function () {
    $('[data-toggle="tooltip1"]').tooltip({
        template: '<div class="tooltip CUSTOM-CLASS1"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
        width: 300,
        title: tooltipMsg,
        html: true,
        placement: 'bottom'
    });
    $('[data-toggle="tooltip2"]').tooltip({
        template: '<div class="tooltip CUSTOM-CLASS2"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
        width: 300,
        title: tooltipMsg,
        html: true
    });
    $('[data-toggle="tooltip3"]').tooltip({
        template: '<div class="tooltip CUSTOM-CLASS3"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
        width: 300,
        title: tooltipMsg,
        html: true
    });
    $('[data-toggle="tooltip4"]').tooltip({
        template: '<div class="tooltip CUSTOM-CLASS4"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
        width: 300,
        title: tooltipMsg,
        html: true
    });
});