How to create a color key within a javascript hover?

Question

I have a dynamic part of my website that shows a table if there are values and hides the table if there are no values. When it shows the table, the values in the table are in different colors that represent different definitions. I want to be able to add hover text with a color key for these definitions. Originally, I wanted a hover to have a little square of that color with the definition next to the color. I thought that might be too difficult after looking around, so I've resorted to just trying to change the actual color of the definition in order to show the link between the value/color/definition . However...I can't even figure out how to do that. i need the hover to occur on mouseover, so right now i have this until I figure out how to get colors / change the color text IN the hover paragraph:

$myResults.find('.Solutions').bind("mouseover", function(){
 $(".myTable").attr('title', 'blue - value1 \n red - value2 \n olive - value3 \n');
});

I tried using tooltipster and couldn't get that to work.

You can't do any formatting in an HTML title attribute. You will need some sort of tooltip library. — Dave, Sep 24 '14 at 15:27
possible duplicate of [How to change the style of Title attribute inside the anchor tag?](http://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribute-inside-the-anchor-tag) — Dave, Sep 24 '14 at 15:29
@Teemu Yeah [line breaks are specifically allowed](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#title) but by formatting I mean you can't apply colors/CSS. — Dave, Sep 24 '14 at 15:32
@dave, I saw that question but was not able to form a solution for my issue. If I try a lot of the suggestions on that post, i get a double tooltip, like they said as well. I have not found my solution from that question. — user2847749, Sep 24 '14 at 15:39

score 2 · Accepted Answer · answered Sep 24 '14 at 17:43

If you want to put HTML/CSS in tooltips you must use a library like tooltipster, jQuery UI, Kendo UI, or a plethora of other options.

Here's an example using tooltipster:

$(document).ready(function() {
 $('.myTable').tooltipster({
  content: $('<div class="tip blue">Blue</div><div class="tip red">Red</div><div class="tip olive">Olive</div>')
 });
});

.myTable {
  height:20px;
  width:200px;
  background-color: #CCC;
  text-align:center;
}

.tip {
  height:50px;
  width:50px;
  float:left;
  text-align:center;
}

.blue {
  background-color: #00F;
}

.red {
  background-color: #F00;
}

.olive {
  background-color: #808000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/css/themes/tooltipster-light.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/js/jquery.tooltipster.min.js"></script>

<div class="myTable">Hover Over Me</div>

thank you @dave. this looks like what i was trying / what I need. I currently have jquery v1.7.1 as that is what our project is running on. I added jquery.tooltipster.min.js, tooltipster.css, and tooltipster-light.css. However, when i am trying to run it I am getting "Uncaught TypeError: undefined is not a function" on the "$('.myTable').tooltipster({" line. any ideas?? — user2847749, Sep 24 '14 at 18:26
OMG. it's been so long. I forgot I needed to add the scripts and link lines in my index.html file. I did that and it showed up!!! It needs some CSS work...but THANK YOU!!! — user2847749, Sep 24 '14 at 18:46

How to create a color key within a javascript hover?

1 Answers1