0

When I hover over on (i) tooltip background color is showing black how can I change background color to blue when user hover over on the tooltip.

so far tried code

glyphicon.html

<label for="epcfLevel3Name" class="col-md-5 required">EPCF:<span tooltip="{{epcfObj.epcfToolTip}}" id="tooltip" class="glyphicon glyphicon-info-sign pull-right"></span></label>

css

#tooltip {
    position: relative;
    color: #66CCFF;
}
Cœur
  • 37,241
  • 25
  • 195
  • 267
aftab
  • 535
  • 4
  • 13
  • 46
  • How is the background color set now? Show us **that** CSS. – Paulie_D May 26 '15 at 16:25
  • This question has already been answered [here](http://stackoverflow.com/questions/17642447/change-bootstrap-tooltip-color) – George May 26 '15 at 16:28
  • This is not directly related to the problem, but still important to note: Please be aware that `id` is a unique identifier, which means that you **must not** have two or more elements on a page with the same `id` value. So if you use the code you showed, there may be only **one** tooltip per html document. – connexo May 26 '15 at 16:47
  • look at this answer: http://stackoverflow.com/a/38279489/3554107. For styling each directional arrows, we have to select each arrow using CSS attribute selector and then style them individually. – vishnu Jul 09 '16 at 07:44

2 Answers2

5

Try this:

tooltip

.tooltip-inner {
    color: #fff;
    background: #FF9900;
}

tooltip arrow

.tooltip.top .tooltip-arrow { border-top-color: #FF9900; }
.tooltip.right .tooltip-arrow { border-right-color: #FF9900; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #FF9900; }
.tooltip.left .tooltip-arrow { border-left-color: #FF9900; }

Note: To override set !important

Luís P. A.
  • 9,524
  • 2
  • 23
  • 36
  • 1
    Use of `!important` should be avoided wherever possible. – Paulie_D May 26 '15 at 16:24
  • To override, do **not** use `important!`. Declare the same selector Bootstrap uses to style it, and make sure your definitions are loaded **after** Bootstrap's CSS. – connexo May 26 '15 at 16:49
  • Thanks for the help it worked for the background color but arrow is still showing black and another thing how can i adjust the height of the tooltip right now its going up and overlapping other html element. – aftab May 26 '15 at 17:18
0

template string

<div class="tooltip" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner"></div>
</div>

Base HTML to use when creating the tooltip.

The tooltip's title will be injected into the .tooltip-inner. .tooltip-arrow will become the tooltip's arrow. The outermost wrapper element should have the .tooltip class.
http://getbootstrap.com/javascript/#tooltips

To answer your question

How can I change background color to blue when the user hovers over the tooltip?

Style the tooltip using the .tooltip-inner and tooltop-arrow selectors. The .tooltip selector should be left alone.

For example

(Demo)

.tooltip-inner {
    background: #66CCFF;
}
.tooltip.top .tooltip-arrow {
    border-top-color: #66CCFF; 
}
.tooltip.left .tooltip-arrow { 
    border-left-color: #66CCFF; 
}
.tooltip.right .tooltip-arrow { 
    border-right-color: #66CCFF; 
}
.tooltip.bottom .tooltip-arrow { 
    border-bottom-color: #66CCFF; 
}