0

I have a table and different fields in the table will change font color depending on if a flag is flipped. I have several flags with different colors that might be flipped at any time.

I wanted to include a hover over text that had the name of the exception caused by the flag and in the same color as the flag.

(I was originally going to include a little square of color next to the name but this seems difficult/impossible WITHIN a hover, so now I'm just trying to change the text color).

I cannot get this to work. help?

my flags are: 

flag1, if true then the field shows in red for exception1
flag2, if true then the fields shows in blue for exception2
flag3, if true then the fields shows in green for exception3

javascript/jquery:

if($flag1 === true){            
    $flag1.css("color", "red");
    $(".myTable").attr('title', 'exception1').css("color","red");
}else if($flag2 === true){              
    $flag2.css("color", "blue");
    $(".myTable").attr('title', 'exception2').css("color","blue");
}else if($flag3 === true){              
    $flag3.css("color", "green");
    $(".myTable").attr('title', 'exception3').css("color","green");
}

however, trying to color the text that shows up INSIDE THE HOVER, isn't working. it's just coloring more of the table's fields. How can I color the text inside the hover instead of it's default black color?

As a side note, if it's just as easy to put a block of color next to the text instead of coloring the text, please let me know about this as well. I cannot seem to find a solution for either.

please see fiddle for simple example. http://jsfiddle.net/L3e1ff3g/

user2847749
  • 339
  • 2
  • 9
  • 27
  • Will you show your code in fiddle. – Benjamin Aug 27 '14 at 15:45
  • please see fiddle for simple example. http://jsfiddle.net/L3e1ff3g/ – user2847749 Aug 28 '14 at 12:51
  • Does that linked JS Fiddle reproduce your problem? I can't see *anything* happening when I hover, click or otherwise attempt to interact with the page. – David Thomas Aug 28 '14 at 13:09
  • @david the fiddle works for me. Hover over the table (the table with red text) you should see "exception1" in black text. I want to be able to color that text red and not the table text red. – user2847749 Aug 28 '14 at 14:10
  • Ah, in which case it's impossible (the native tooltip cannot be styled so far as I'm yet aware); it's possible, though, to use pseudo-elements or descendant elements to replicate the native tooltip functionality (whether those are hard-coded descendants or JavaScript-created elements), for example: http://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribute-inside-the-anchor-tag – David Thomas Aug 28 '14 at 14:23
  • ahh...Thank you for the link. I'm looking at it and trying to implement. no luck so far. – user2847749 Aug 28 '14 at 18:05

1 Answers1

0

First of all in your if/else you are checking every-time ($flag1 === true) I think it should be 

if($flag1 === true){   
...
}else if($flag2 === true){
...
}else if($flag3 === true){

About second question - please provide your html

Greenonion
  • 87
  • 5
  • Thank you for your comment. I have heavily simplified my real code into this case. That was a typo while I was typing it up in stackoverflow. my code if/else is correct and a lot more detailed. My html is created dynamically within my javascript. is there something you were looking for in particular? Since I'd be adding a hover, i'm not sure why it's relevant to the html. – user2847749 Aug 27 '14 at 15:52
  • Hi, i see. Actually it's logic, since you modify style for whole table. For ex. if you want to change color of id text you can use this selector intead of yours: $(".curPlanTable .myid").css("color","red"); – Greenonion Aug 29 '14 at 11:28
  • thanks for your comment, but that's not the logic I need...in the provided jsfiddle, Hover over the table (the table with red text) you should see "exception1" in black text. I want to be able to color that text red and not the table text red. – user2847749 Aug 29 '14 at 12:32