Bootstrap 4 - Styling specific tooltip (from ID or class)












1


















<html>

<head>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">



<style>

.red-tooltip.tooltip-inner {

background-color:red;

}

.red-tooltip + .tooltip-inner {

background-color:red;

}

.red-tooltip > .tooltip-inner {

background-color:red;

}

.red-tooltip ~ .tooltip-inner {

background-color:red;

}

</style>



</head>



<body>

<span class="red-tooltip" data-toggle="tooltip" data-placement="top" title="Hello world">Hover me</span>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>



<script>

$(function () {

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

})

</script>

</body>

</html>





I'm having trouble styling specific bootstrap tooltips. I have learned that I can universally style all the tooltips using these:



.tooltip-inner {

// Styles

}

.comment-tooltip .tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {

// Styles

}


Etc. for all the tooltip arrows. But how can I style a specific tooltip (i.e. one element's tooltip). For example let's say this is my HTML:



<span class="red-tooltip" data-toggle="tooltip" data-placement="top" title="Hello world">

Tooltip

</span>


I tried all the CSS combinators (shown below) but none of them seem to let me style ONLY tooltips with the class red-tooltip



.red-tooltip.tooltip-inner {

background-color:#ff0000;

}

.red-tooltip ~ .tooltip-inner {

background-color:#ff0000;

}

.red-tooltip > .tooltip-inner {

background-color:#ff0000;

}

.red-tooltip + .tooltip-inner {

background-color:#ff0000;

}


Any insight would be much appreciated!






html css twitter-bootstrap







share|improve this question

























  • Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Complete, and Verifiable example

    – Paulie_D
    Jan 18 at 17:30











  • I added a snippet.

    – Ryan
    Jan 18 at 17:36











  • Have you tried the snippet from here? It might work. stackoverflow.com/questions/17642447/…

    – Iskandar Reza Razali
    Jan 18 at 19:14
















1


















<html>

<head>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">



<style>

.red-tooltip.tooltip-inner {

background-color:red;

}

.red-tooltip + .tooltip-inner {

background-color:red;

}

.red-tooltip > .tooltip-inner {

background-color:red;

}

.red-tooltip ~ .tooltip-inner {

background-color:red;

}

</style>



</head>



<body>

<span class="red-tooltip" data-toggle="tooltip" data-placement="top" title="Hello world">Hover me</span>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>



<script>

$(function () {

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

})

</script>

</body>

</html>





I'm having trouble styling specific bootstrap tooltips. I have learned that I can universally style all the tooltips using these:



.tooltip-inner {

// Styles

}

.comment-tooltip .tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {

// Styles

}


Etc. for all the tooltip arrows. But how can I style a specific tooltip (i.e. one element's tooltip). For example let's say this is my HTML:



<span class="red-tooltip" data-toggle="tooltip" data-placement="top" title="Hello world">

Tooltip

</span>


I tried all the CSS combinators (shown below) but none of them seem to let me style ONLY tooltips with the class red-tooltip



.red-tooltip.tooltip-inner {

background-color:#ff0000;

}

.red-tooltip ~ .tooltip-inner {

background-color:#ff0000;

}

.red-tooltip > .tooltip-inner {

background-color:#ff0000;

}

.red-tooltip + .tooltip-inner {

background-color:#ff0000;

}


Any insight would be much appreciated!






html css twitter-bootstrap







share|improve this question

























  • Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Complete, and Verifiable example

    – Paulie_D
    Jan 18 at 17:30











  • I added a snippet.

    – Ryan
    Jan 18 at 17:36











  • Have you tried the snippet from here? It might work. stackoverflow.com/questions/17642447/…

    – Iskandar Reza Razali
    Jan 18 at 19:14














1












1








1











<html>

<head>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">



<style>

.red-tooltip.tooltip-inner {

background-color:red;

}

.red-tooltip + .tooltip-inner {

background-color:red;

}

.red-tooltip > .tooltip-inner {

background-color:red;

}

.red-tooltip ~ .tooltip-inner {

background-color:red;

}

</style>



</head>



<body>

<span class="red-tooltip" data-toggle="tooltip" data-placement="top" title="Hello world">Hover me</span>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>



<script>

$(function () {

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

})

</script>

</body>

</html>





I'm having trouble styling specific bootstrap tooltips. I have learned that I can universally style all the tooltips using these:



.tooltip-inner {

// Styles

}

.comment-tooltip .tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {

// Styles

}


Etc. for all the tooltip arrows. But how can I style a specific tooltip (i.e. one element's tooltip). For example let's say this is my HTML:



<span class="red-tooltip" data-toggle="tooltip" data-placement="top" title="Hello world">

Tooltip

</span>


I tried all the CSS combinators (shown below) but none of them seem to let me style ONLY tooltips with the class red-tooltip



.red-tooltip.tooltip-inner {

background-color:#ff0000;

}

.red-tooltip ~ .tooltip-inner {

background-color:#ff0000;

}

.red-tooltip > .tooltip-inner {

background-color:#ff0000;

}

.red-tooltip + .tooltip-inner {

background-color:#ff0000;

}


Any insight would be much appreciated!






html css twitter-bootstrap







share|improve this question



















<html>

<head>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">



<style>

.red-tooltip.tooltip-inner {

background-color:red;

}

.red-tooltip + .tooltip-inner {

background-color:red;

}

.red-tooltip > .tooltip-inner {

background-color:red;

}

.red-tooltip ~ .tooltip-inner {

background-color:red;

}

</style>



</head>



<body>

<span class="red-tooltip" data-toggle="tooltip" data-placement="top" title="Hello world">Hover me</span>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>



<script>

$(function () {

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

})

</script>

</body>

</html>





I'm having trouble styling specific bootstrap tooltips. I have learned that I can universally style all the tooltips using these:



.tooltip-inner {

// Styles

}

.comment-tooltip .tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {

// Styles

}


Etc. for all the tooltip arrows. But how can I style a specific tooltip (i.e. one element's tooltip). For example let's say this is my HTML:



<span class="red-tooltip" data-toggle="tooltip" data-placement="top" title="Hello world">

Tooltip

</span>


I tried all the CSS combinators (shown below) but none of them seem to let me style ONLY tooltips with the class red-tooltip



.red-tooltip.tooltip-inner {

background-color:#ff0000;

}

.red-tooltip ~ .tooltip-inner {

background-color:#ff0000;

}

.red-tooltip > .tooltip-inner {

background-color:#ff0000;

}

.red-tooltip + .tooltip-inner {

background-color:#ff0000;

}


Any insight would be much appreciated! 






<html>

<head>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">



<style>

.red-tooltip.tooltip-inner {

background-color:red;

}

.red-tooltip + .tooltip-inner {

background-color:red;

}

.red-tooltip > .tooltip-inner {

background-color:red;

}

.red-tooltip ~ .tooltip-inner {

background-color:red;

}

</style>



</head>



<body>

<span class="red-tooltip" data-toggle="tooltip" data-placement="top" title="Hello world">Hover me</span>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>



<script>

$(function () {

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

})

</script>

</body>

</html>





<html>

<head>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">



<style>

.red-tooltip.tooltip-inner {

background-color:red;

}

.red-tooltip + .tooltip-inner {

background-color:red;

}

.red-tooltip > .tooltip-inner {

background-color:red;

}

.red-tooltip ~ .tooltip-inner {

background-color:red;

}

</style>



</head>



<body>

<span class="red-tooltip" data-toggle="tooltip" data-placement="top" title="Hello world">Hover me</span>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>



<script>

$(function () {

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

})

</script>

</body>

</html>





html css twitter-bootstrap




html css twitter-bootstrap






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 18 at 17:35







Ryan

















asked Jan 18 at 17:24









RyanRyan

1063




1063













  • Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Complete, and Verifiable example

    – Paulie_D
    Jan 18 at 17:30











  • I added a snippet.

    – Ryan
    Jan 18 at 17:36











  • Have you tried the snippet from here? It might work. stackoverflow.com/questions/17642447/…

    – Iskandar Reza Razali
    Jan 18 at 19:14



















  • Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Complete, and Verifiable example

    – Paulie_D
    Jan 18 at 17:30











  • I added a snippet.

    – Ryan
    Jan 18 at 17:36











  • Have you tried the snippet from here? It might work. stackoverflow.com/questions/17642447/…

    – Iskandar Reza Razali
    Jan 18 at 19:14

















Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Complete, and Verifiable example

– Paulie_D
Jan 18 at 17:30





Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Complete, and Verifiable example

– Paulie_D
Jan 18 at 17:30













I added a snippet.

– Ryan
Jan 18 at 17:36





I added a snippet.

– Ryan
Jan 18 at 17:36













Have you tried the snippet from here? It might work. stackoverflow.com/questions/17642447/…

– Iskandar Reza Razali
Jan 18 at 19:14





Have you tried the snippet from here? It might work. stackoverflow.com/questions/17642447/…

– Iskandar Reza Razali
Jan 18 at 19:14












2 Answers
2






active

oldest

votes


















0














Using Bootstrap 4.0.0



.tooltip-inner class will allow us to change the background color of the tool tip.



Also, make sure you follow the Overview of Tooltips from Bootstrap docs.





  • Tooltips rely on the 3rd party library Popper.js for positioning. You must include popper.min.js before bootstrap.js or use
    bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js
    in order for tooltips to work!

  • Tooltips are opt-in for performance reasons, so you must initialize them yourself.







<!doctype html>

<html lang="en">



<head>

  <!-- Required meta tags -->

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">



  <!-- Bootstrap CSS -->

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>



<body>

  <span href="#" data-toggle="tooltip" data-placement="bottom" title="Some tooltip text!">Hover over me</span>



  <!-- Optional JavaScript -->

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  <script>

    $(function() {

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

    })

  </script>

  <style>

    .tooltip-inner {

      background-color: red;

    }

    

    .bs-tooltip-auto[x-placement^=bottom] .arrow::before,

    .bs-tooltip-bottom .arrow::before {

      border-bottom-color: red !important;

    }

  </style>

</body>



</html>








share|improve this answer

































    0














    If you want only to apply a specific style to only one tooltip when hover it, I hope this will help you.



    <html>
    

    
<head>
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
    
    crossorigin="anonymous">
    

    
</head>
    

    
<body>
    
    <span id="myTooltip" class="red-tooltip" data-toggle="tooltip" data-placement="top" title="Hello world">Hover me</span>
    

    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    
    crossorigin="anonymous"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
    
    crossorigin="anonymous"></script>
    
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    
    crossorigin="anonymous"></script>
    
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    
    crossorigin="anonymous"></script>
    
    <style>
    
        .red {
    
            background-color: red !important;
    
        }
    
    </style>
    

    
    <script>
    
        $(function () {
    
            $('[data-toggle="tooltip"]').tooltip();
    
        });
    

    
        // for store a random Id, we will use it to remove
    
        // the style we append to the document on tooltip hover
    
        var randomId;
    
         // get the tooltip to apply the style
    
        $('#myTooltip').hover((event) => {
    
            if (event.type == 'mouseenter' || event.type == 'mouseover') {
    
                // generate random Id and append the style to head
    
                randomId = 'tooltip' + Math.floor(Math.random() * 100) + 1;
    

    
                // append the style to the head
    
                $('head').append(
    
                    `<style data-remove="${randomId}">
    
                        .tooltip-inner{ 
    
                            background-color: red;
    
                        }
    
                        .bs-tooltip-auto[x-placement^=bottom] .arrow::before, 
    
                        .bs-tooltip-bottom .arrow::before {
    
                            border-bottom-color: red !important;
    
                        }
    
                    </style>`
    
                );
    
            }
    
            else if (event.type == 'mouseout' || event.type == 'mouseleave') {
    
                // we remove the style so doesn't effect other tooltip,
    
                // we wait to the tooltip fade
    
                setTimeout(() => {
    
                    $(`[data-remove="${randomId}"]`).remove();
    
                }, 100)
    
            }
    
        })
    
    </script>
    
</body>
    

    
</html>





    share|improve this answer

























      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54258756%2fbootstrap-4-styling-specific-tooltip-from-id-or-class%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      0














      Using Bootstrap 4.0.0



      .tooltip-inner class will allow us to change the background color of the tool tip.



      Also, make sure you follow the Overview of Tooltips from Bootstrap docs.





      • Tooltips rely on the 3rd party library Popper.js for positioning. You must include popper.min.js before bootstrap.js or use
        bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js
        in order for tooltips to work!

      • Tooltips are opt-in for performance reasons, so you must initialize them yourself.







      <!doctype html>
      
<html lang="en">
      

      
<head>
      
  <!-- Required meta tags -->
      
  <meta charset="utf-8">
      
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      

      
  <!-- Bootstrap CSS -->
      
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      
</head>
      

      
<body>
      
  <span href="#" data-toggle="tooltip" data-placement="bottom" title="Some tooltip text!">Hover over me</span>
      

      
  <!-- Optional JavaScript -->
      
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
      
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
      
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
      
  <script>
      
    $(function() {
      
      $('[data-toggle="tooltip"]').tooltip()
      
    })
      
  </script>
      
  <style>
      
    .tooltip-inner {
      
      background-color: red;
      
    }
      
    
      
    .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
      
    .bs-tooltip-bottom .arrow::before {
      
      border-bottom-color: red !important;
      
    }
      
  </style>
      
</body>
      

      
</html>








      share|improve this answer






























        0














        Using Bootstrap 4.0.0



        .tooltip-inner class will allow us to change the background color of the tool tip.



        Also, make sure you follow the Overview of Tooltips from Bootstrap docs.





        • Tooltips rely on the 3rd party library Popper.js for positioning. You must include popper.min.js before bootstrap.js or use
          bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js
          in order for tooltips to work!

        • Tooltips are opt-in for performance reasons, so you must initialize them yourself.







        <!doctype html>
        
<html lang="en">
        

        
<head>
        
  <!-- Required meta tags -->
        
  <meta charset="utf-8">
        
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        

        
  <!-- Bootstrap CSS -->
        
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        
</head>
        

        
<body>
        
  <span href="#" data-toggle="tooltip" data-placement="bottom" title="Some tooltip text!">Hover over me</span>
        

        
  <!-- Optional JavaScript -->
        
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        
  <script>
        
    $(function() {
        
      $('[data-toggle="tooltip"]').tooltip()
        
    })
        
  </script>
        
  <style>
        
    .tooltip-inner {
        
      background-color: red;
        
    }
        
    
        
    .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
        
    .bs-tooltip-bottom .arrow::before {
        
      border-bottom-color: red !important;
        
    }
        
  </style>
        
</body>
        

        
</html>








        share|improve this answer




























          0












          0








          0







          Using Bootstrap 4.0.0



          .tooltip-inner class will allow us to change the background color of the tool tip.



          Also, make sure you follow the Overview of Tooltips from Bootstrap docs.





          • Tooltips rely on the 3rd party library Popper.js for positioning. You must include popper.min.js before bootstrap.js or use
            bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js
            in order for tooltips to work!

          • Tooltips are opt-in for performance reasons, so you must initialize them yourself.







          <!doctype html>
          
<html lang="en">
          

          
<head>
          
  <!-- Required meta tags -->
          
  <meta charset="utf-8">
          
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
          

          
  <!-- Bootstrap CSS -->
          
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
          
</head>
          

          
<body>
          
  <span href="#" data-toggle="tooltip" data-placement="bottom" title="Some tooltip text!">Hover over me</span>
          

          
  <!-- Optional JavaScript -->
          
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
          
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
          
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
          
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
          
  <script>
          
    $(function() {
          
      $('[data-toggle="tooltip"]').tooltip()
          
    })
          
  </script>
          
  <style>
          
    .tooltip-inner {
          
      background-color: red;
          
    }
          
    
          
    .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
          
    .bs-tooltip-bottom .arrow::before {
          
      border-bottom-color: red !important;
          
    }
          
  </style>
          
</body>
          

          
</html>








          share|improve this answer















          Using Bootstrap 4.0.0



          .tooltip-inner class will allow us to change the background color of the tool tip.



          Also, make sure you follow the Overview of Tooltips from Bootstrap docs.





          • Tooltips rely on the 3rd party library Popper.js for positioning. You must include popper.min.js before bootstrap.js or use
            bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js
            in order for tooltips to work!

          • Tooltips are opt-in for performance reasons, so you must initialize them yourself.







          <!doctype html>
          
<html lang="en">
          

          
<head>
          
  <!-- Required meta tags -->
          
  <meta charset="utf-8">
          
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
          

          
  <!-- Bootstrap CSS -->
          
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
          
</head>
          

          
<body>
          
  <span href="#" data-toggle="tooltip" data-placement="bottom" title="Some tooltip text!">Hover over me</span>
          

          
  <!-- Optional JavaScript -->
          
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
          
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
          
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
          
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
          
  <script>
          
    $(function() {
          
      $('[data-toggle="tooltip"]').tooltip()
          
    })
          
  </script>
          
  <style>
          
    .tooltip-inner {
          
      background-color: red;
          
    }
          
    
          
    .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
          
    .bs-tooltip-bottom .arrow::before {
          
      border-bottom-color: red !important;
          
    }
          
  </style>
          
</body>
          

          
</html>








          <!doctype html>
          
<html lang="en">
          

          
<head>
          
  <!-- Required meta tags -->
          
  <meta charset="utf-8">
          
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
          

          
  <!-- Bootstrap CSS -->
          
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
          
</head>
          

          
<body>
          
  <span href="#" data-toggle="tooltip" data-placement="bottom" title="Some tooltip text!">Hover over me</span>
          

          
  <!-- Optional JavaScript -->
          
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
          
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
          
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
          
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
          
  <script>
          
    $(function() {
          
      $('[data-toggle="tooltip"]').tooltip()
          
    })
          
  </script>
          
  <style>
          
    .tooltip-inner {
          
      background-color: red;
          
    }
          
    
          
    .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
          
    .bs-tooltip-bottom .arrow::before {
          
      border-bottom-color: red !important;
          
    }
          
  </style>
          
</body>
          

          
</html>





          <!doctype html>
          
<html lang="en">
          

          
<head>
          
  <!-- Required meta tags -->
          
  <meta charset="utf-8">
          
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
          

          
  <!-- Bootstrap CSS -->
          
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
          
</head>
          

          
<body>
          
  <span href="#" data-toggle="tooltip" data-placement="bottom" title="Some tooltip text!">Hover over me</span>
          

          
  <!-- Optional JavaScript -->
          
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
          
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
          
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
          
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
          
  <script>
          
    $(function() {
          
      $('[data-toggle="tooltip"]').tooltip()
          
    })
          
  </script>
          
  <style>
          
    .tooltip-inner {
          
      background-color: red;
          
    }
          
    
          
    .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
          
    .bs-tooltip-bottom .arrow::before {
          
      border-bottom-color: red !important;
          
    }
          
  </style>
          
</body>
          

          
</html>






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Jan 18 at 22:15

























          answered Jan 18 at 20:43









          PavanPavan

          7171238




          7171238

























              0














              If you want only to apply a specific style to only one tooltip when hover it, I hope this will help you.



              <html>
              

              
<head>
              
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
              
    crossorigin="anonymous">
              

              
</head>
              

              
<body>
              
    <span id="myTooltip" class="red-tooltip" data-toggle="tooltip" data-placement="top" title="Hello world">Hover me</span>
              

              
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
              
    crossorigin="anonymous"></script>
              
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
              
    crossorigin="anonymous"></script>
              
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
              
    crossorigin="anonymous"></script>
              
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
              
    crossorigin="anonymous"></script>
              
    <style>
              
        .red {
              
            background-color: red !important;
              
        }
              
    </style>
              

              
    <script>
              
        $(function () {
              
            $('[data-toggle="tooltip"]').tooltip();
              
        });
              

              
        // for store a random Id, we will use it to remove
              
        // the style we append to the document on tooltip hover
              
        var randomId;
              
         // get the tooltip to apply the style
              
        $('#myTooltip').hover((event) => {
              
            if (event.type == 'mouseenter' || event.type == 'mouseover') {
              
                // generate random Id and append the style to head
              
                randomId = 'tooltip' + Math.floor(Math.random() * 100) + 1;
              

              
                // append the style to the head
              
                $('head').append(
              
                    `<style data-remove="${randomId}">
              
                        .tooltip-inner{ 
              
                            background-color: red;
              
                        }
              
                        .bs-tooltip-auto[x-placement^=bottom] .arrow::before, 
              
                        .bs-tooltip-bottom .arrow::before {
              
                            border-bottom-color: red !important;
              
                        }
              
                    </style>`
              
                );
              
            }
              
            else if (event.type == 'mouseout' || event.type == 'mouseleave') {
              
                // we remove the style so doesn't effect other tooltip,
              
                // we wait to the tooltip fade
              
                setTimeout(() => {
              
                    $(`[data-remove="${randomId}"]`).remove();
              
                }, 100)
              
            }
              
        })
              
    </script>
              
</body>
              

              
</html>





              share|improve this answer






























                0














                If you want only to apply a specific style to only one tooltip when hover it, I hope this will help you.



                <html>
                

                
<head>
                
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
                
    crossorigin="anonymous">
                

                
</head>
                

                
<body>
                
    <span id="myTooltip" class="red-tooltip" data-toggle="tooltip" data-placement="top" title="Hello world">Hover me</span>
                

                
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
                
    crossorigin="anonymous"></script>
                
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
                
    crossorigin="anonymous"></script>
                
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
                
    crossorigin="anonymous"></script>
                
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
                
    crossorigin="anonymous"></script>
                
    <style>
                
        .red {
                
            background-color: red !important;
                
        }
                
    </style>
                

                
    <script>
                
        $(function () {
                
            $('[data-toggle="tooltip"]').tooltip();
                
        });
                

                
        // for store a random Id, we will use it to remove
                
        // the style we append to the document on tooltip hover
                
        var randomId;
                
         // get the tooltip to apply the style
                
        $('#myTooltip').hover((event) => {
                
            if (event.type == 'mouseenter' || event.type == 'mouseover') {
                
                // generate random Id and append the style to head
                
                randomId = 'tooltip' + Math.floor(Math.random() * 100) + 1;
                

                
                // append the style to the head
                
                $('head').append(
                
                    `<style data-remove="${randomId}">
                
                        .tooltip-inner{ 
                
                            background-color: red;
                
                        }
                
                        .bs-tooltip-auto[x-placement^=bottom] .arrow::before, 
                
                        .bs-tooltip-bottom .arrow::before {
                
                            border-bottom-color: red !important;
                
                        }
                
                    </style>`
                
                );
                
            }
                
            else if (event.type == 'mouseout' || event.type == 'mouseleave') {
                
                // we remove the style so doesn't effect other tooltip,
                
                // we wait to the tooltip fade
                
                setTimeout(() => {
                
                    $(`[data-remove="${randomId}"]`).remove();
                
                }, 100)
                
            }
                
        })
                
    </script>
                
</body>
                

                
</html>





                share|improve this answer




























                  0












                  0








                  0







                  If you want only to apply a specific style to only one tooltip when hover it, I hope this will help you.



                  <html>
                  

                  
<head>
                  
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
                  
    crossorigin="anonymous">
                  

                  
</head>
                  

                  
<body>
                  
    <span id="myTooltip" class="red-tooltip" data-toggle="tooltip" data-placement="top" title="Hello world">Hover me</span>
                  

                  
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
                  
    crossorigin="anonymous"></script>
                  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
                  
    crossorigin="anonymous"></script>
                  
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
                  
    crossorigin="anonymous"></script>
                  
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
                  
    crossorigin="anonymous"></script>
                  
    <style>
                  
        .red {
                  
            background-color: red !important;
                  
        }
                  
    </style>
                  

                  
    <script>
                  
        $(function () {
                  
            $('[data-toggle="tooltip"]').tooltip();
                  
        });
                  

                  
        // for store a random Id, we will use it to remove
                  
        // the style we append to the document on tooltip hover
                  
        var randomId;
                  
         // get the tooltip to apply the style
                  
        $('#myTooltip').hover((event) => {
                  
            if (event.type == 'mouseenter' || event.type == 'mouseover') {
                  
                // generate random Id and append the style to head
                  
                randomId = 'tooltip' + Math.floor(Math.random() * 100) + 1;
                  

                  
                // append the style to the head
                  
                $('head').append(
                  
                    `<style data-remove="${randomId}">
                  
                        .tooltip-inner{ 
                  
                            background-color: red;
                  
                        }
                  
                        .bs-tooltip-auto[x-placement^=bottom] .arrow::before, 
                  
                        .bs-tooltip-bottom .arrow::before {
                  
                            border-bottom-color: red !important;
                  
                        }
                  
                    </style>`
                  
                );
                  
            }
                  
            else if (event.type == 'mouseout' || event.type == 'mouseleave') {
                  
                // we remove the style so doesn't effect other tooltip,
                  
                // we wait to the tooltip fade
                  
                setTimeout(() => {
                  
                    $(`[data-remove="${randomId}"]`).remove();
                  
                }, 100)
                  
            }
                  
        })
                  
    </script>
                  
</body>
                  

                  
</html>





                  share|improve this answer















                  If you want only to apply a specific style to only one tooltip when hover it, I hope this will help you.



                  <html>
                  

                  
<head>
                  
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
                  
    crossorigin="anonymous">
                  

                  
</head>
                  

                  
<body>
                  
    <span id="myTooltip" class="red-tooltip" data-toggle="tooltip" data-placement="top" title="Hello world">Hover me</span>
                  

                  
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
                  
    crossorigin="anonymous"></script>
                  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
                  
    crossorigin="anonymous"></script>
                  
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
                  
    crossorigin="anonymous"></script>
                  
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
                  
    crossorigin="anonymous"></script>
                  
    <style>
                  
        .red {
                  
            background-color: red !important;
                  
        }
                  
    </style>
                  

                  
    <script>
                  
        $(function () {
                  
            $('[data-toggle="tooltip"]').tooltip();
                  
        });
                  

                  
        // for store a random Id, we will use it to remove
                  
        // the style we append to the document on tooltip hover
                  
        var randomId;
                  
         // get the tooltip to apply the style
                  
        $('#myTooltip').hover((event) => {
                  
            if (event.type == 'mouseenter' || event.type == 'mouseover') {
                  
                // generate random Id and append the style to head
                  
                randomId = 'tooltip' + Math.floor(Math.random() * 100) + 1;
                  

                  
                // append the style to the head
                  
                $('head').append(
                  
                    `<style data-remove="${randomId}">
                  
                        .tooltip-inner{ 
                  
                            background-color: red;
                  
                        }
                  
                        .bs-tooltip-auto[x-placement^=bottom] .arrow::before, 
                  
                        .bs-tooltip-bottom .arrow::before {
                  
                            border-bottom-color: red !important;
                  
                        }
                  
                    </style>`
                  
                );
                  
            }
                  
            else if (event.type == 'mouseout' || event.type == 'mouseleave') {
                  
                // we remove the style so doesn't effect other tooltip,
                  
                // we wait to the tooltip fade
                  
                setTimeout(() => {
                  
                    $(`[data-remove="${randomId}"]`).remove();
                  
                }, 100)
                  
            }
                  
        })
                  
    </script>
                  
</body>
                  

                  
</html>






                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited Jan 18 at 23:04

























                  answered Jan 18 at 22:42









                  abderrazzak benbouyaabderrazzak benbouya

                  1919




                  1919






























                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid …



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54258756%2fbootstrap-4-styling-specific-tooltip-from-id-or-class%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      -

                      Popular posts from this blog

                      Callistus III

                      Image
                      Callistus III Res apud Vicidata repertae: Nativitas : 8 Ianuarii 1379 ; Canals Obitus : 15 Augusti 1458 ; Roma Patria : Corona Aragoniae Nomen nativum : Alonso de Borja i Llançol Pontificatus 1455 - 1458 Praecessor : Nicolaus V Successor : Pius II Insignia heraldica Callistus III (natus Alphonsus de Borgia Hispanice Alonso de Borja y Borja , Italiane Alfonso Borgia , die 31 Decembris 1378 Saetabis Augustae in Hispania apud Valentiam - obiit die 6 Augusti 1458), papa catholicus episcopus Romanus a die 8 Aprilis 1455 erat. Vita | Alphonsus de Borgia studuit iuri canonico Ilerdae. Postea iuris consultus antipapae Benedicti XIII et regis Alphonsi V Aragoniae fit. Anno 1444 episcopus Valentiae factus est. Anno 1444 a papa Eugenio IV Cardinalis Sanctae Romanae Ecclesiae creatus est. Bibliographia | Friedrich Wilhelm Bautz, "CALIXT III., Papst" in Biographisch-Bibliographisches Kirchenlexikon  vol. 1 (Hammonae, 1975; reimpr. 1990. ISBN 3-88...
                      Read more

                      Ostreoida

                      Image
                      Ostreoida Taxinomia Regnum: Animalia Phylum: Mollusca Classis: Bivalvia Subclassis: Pteriomorphia Ordo: Ostreoida Familiae Anomiidae Dimyidae Entoliidae Gryphaeidae Ostreidae Pectinidae Placunidae Plicatulidae Propeamussiidae Spondylidae Syncyclonemidae Interiores valvium partes fossilis Spondyli ex Pliocaeno Cypri. Ostreoida sunt ordo phyli Molluscorum qui ostreidas et nonnullas bivalvium familias propinquas comprehendit. Circa undecim familiae intra ordinem agnoscuntur, sed subordines, superfamiliae, et subfamiliae multo in ordine adhibentur. Classificatio sequens est synthesis iudiciorum variorum, quam plurimo posse accommodatorum. Indices generum sunt exemplarii, ? potius absoluti. Sunt in hoc ordine paene centum genera. Superfamiliae, familiae, et gravia genera | Subordo Pectinina Superfamilia Pectinoidea Familia Entoliidae (quinque genera) Genus Pectinella Familia Pectinidae (49 genera in ...
                      Read more

                      Plistias Cous

                      Plistias Cous (Graece Πλειστίας ), qui saeculo IV a.C.n. exeunte floruit, insulae Coi incola, fuit anno 306 a.C.n. pro Demetrio Poliorceta dux classium. Ille enim navigator principalis fuit classis omnis; ille una cum Hegesippo Halicarnassensi in proelio iuxta Salaminem Cypri commisso praefuit alae dextrae. Fontes | Diodorus Siculus, Bibliotheca historica 20.50.4 Bibliographia | "Prosopography of Antigonos's Friends and Subordinates" in Richard A. Billows, Antigonos the One-Eyed and the Creation of the Hellenistic State (Berkeley: University of California Press, 1990) no. 98, p. 425 H. Hauben, Het vlootbevelhebberschap in de vroege Diadochen tijd (Bruxellis, 1975) pp. 78, 117-119 T. Lenschau, "Pleistias" in Paulys Real-Enzyklopädie der classischen Altertumswissenschaft edd. G. Wissowa et alii (Stuttgart, 1893-1972 ~ ~) This page is only for reference, If you need detailed information, please check here
                      Read more