Changing the color of tooltips

Question

I have a paragraph in my document that I want to have a little bit of code inside of it. I want this code to have an updating number using javascript (this part is solved), and have it keep updating the tooltip. This tooltip will also need the color white and red in it (this is not solved, I can't figure out how to have several colors in the tooltip), instead of changing its color with CSS alone. My code is

<p data-placement="bottom" data-toggle="tooltip" title="<p style = 'color:red'>Fo<span style = 'color:white'>o</span></p>">Test</p>

yet all that shows up is

<p style = 'color:red'>Fo<span style = 'color:white'>o</span></p>

instead of the wanted result of a red and white foo. As a recap, I need an updating title element that can be two different colors, and can be updated using javascript You can see my code here.

If you **were** going to put a `<` inside an attribute value, which as others have pointed out won't do what you think it will, to be compliant you need to escape it as `<`. — , Mar 07 '16 at 04:03

Scott Marcus · Accepted Answer · 2016-03-09T14:45:07.580

Your approach to this problem is incorrect. You cannot modify the way the browser displays a title, period. Also, the value of the title attribute (or any attribute for that matter) is not parsed as HTML, so including a paragraph element that has a style connected to it is not going to be parsed (as you've found out).

Instead, you should create a span element with the text you wish to display and style the span as you wish. The span should initially be hidden and upon mouseover of the main paragraph, the span can be displayed. The span should have its position set to absolute so it can be placed relative to its parent position in the code (which would be next to the main paragraph).

The JavaScript needs to include event handlers for mouseover and mouseout:

var title = document.getElementById("paragraphTitle");
var para = document.getElementById("par");

para.addEventListener("mouseover", function(){
    title.style.display = "inline";
});

para.addEventListener("mouseout", function(){
    title.style.display = "none";
});

See this fiddle for an example: https://jsfiddle.net/5vysr3ku/24/

Changing the color of tooltips

1 Answers1