Change style of bootstrap tooltip

Question

I have added comment button in my table.When I hover it tooltip will be displayed.
How to change style of tooltips? Can anyone help me?

.tooltip-arrow,
.cancelComments + .tooltip > .tooltip-inner {background-color: #f00;}

https://jsfiddle.net/5h1ybdp1/3/

I tried using popover also but popover is not displaying.

Possible duplicate of http://stackoverflow.com/questions/15383440/styling-the-arrow-on-bootstrap-tooltips/38279489#38279489 and http://stackoverflow.com/questions/17642447/change-bootstrap-tooltip-color — Sagar, May 08 '17 at 07:35

Miomir Dancevic · Answer 1 · 2017-05-08T07:29:50.313

7

Here are simple example

HTML

  <a href="#" data-toggle="tooltip" data-placement="bottom"
       title="" data-original-title="Tooltip on bottom"
       class="red-tooltip">Tooltip on bottom</a>

CSS

.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
.red-tooltip + .tooltip > .tooltip-arrow { border-bottom-color:#f00; }

http://jsfiddle.net/technotarek/2htZe/

Here is working fiddle with your code, the problem you didnt reference bootstrap.js!

https://jsfiddle.net/5h1ybdp1/7/

edited May 08 '17 at 07:29

answered May 08 '17 at 07:10

Miomir Dancevic

6,726
15
74
142

Have you double checked if you referenced your bootstrap files in a proper way? Because I think this code should work. Also, maybe a link to [this post](http://stackoverflow.com/questions/17642447/change-bootstrap-tooltip-color) could clear out things for you. – kevin b. May 08 '17 at 07:14

score 0 · Answer 2 · edited May 10 '17 at 08:10

0

Well, you supposed to write a script in order to generate a tool tip as follows and you haven't include bootstrap.min.js, jqueryand bootstrap.min.js including order is also important. This will resolve your issue here is your updated fiddle https://jsfiddle.net/8q88jrtr/6/

$(document).ready(function(){
    $("i").tooltip();
});

edited May 10 '17 at 08:10

marc_s

732,580
175
1,330
1,459

answered May 08 '17 at 10:22

this.girish

1,296
14
17

score 0 · Answer 3 · edited Jul 09 '19 at 08:15

0

<!-- CSS -->
<style>
a i{margin:50px 0 0 50px;}
#my-tooltip + .tooltip > .tooltip-inner {background-color:#EF5438;}
#my-tooltip + .tooltip > .tooltip-arrow {border-top:5px solid #EF5438;}
</style>
<!-- HTML -->
<a href="#" data-toggle="tooltip" data-placement="top" title="Ur 
Facebook" id="my-tooltip"><i class="fa fa-facebook"></i></a>

edited Jul 09 '19 at 08:15

Makyen

31,849
12
86
121

answered Aug 22 '17 at 18:09

sam

11

You should explain what this code does. And also apply the correct formatting please. – Juan Carlos Mendoza Aug 22 '17 at 18:17

score 0 · Answer 4 · answered Nov 14 '18 at 08:00

Change Markup adding title and content in bootstrap-3  tool-tip

//add this script in footer or header after bootstrap js, css and jquery resources

    <script>
            $(document).ready(function () {
                //tooltip added on attribute "data-toggle"
                $('[data-toggle="tooltip"]').tooltip();
                $(".tooltipControl").popover({ trigger: "hover" });
</script>

Html

<a links tooltipControl" data-content="No Detail" data-placement="right" data-original-title="Title">See tooltip Here</a>

Change style of bootstrap tooltip

4 Answers4