Guide on making a color legend with JavaScript hover effects

On my website, there is a dynamic element that displays a table when values are present and hides it when there are no values. The values in the table are color-coded to represent different definitions. I wanted to add hover text with a color key for these definitions. Initially, I had planned on having a small colored square next to each definition upon hovering but realized it might be too complicated. So, I attempted to change the actual color of the definition itself to establish the link between the value, color, and definition. However, I have been unable to figure out how to do this effectively. I require the hover effect to trigger on mouseover. For now, this is what I have configured until I can find a way to implement the colors or modify the text color within the hover paragraph:

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

I experimented with tooltipster but was unsuccessful in getting it to work as intended.

javascriptjqueryhtmlcsshover

Answer №1

If you're looking to incorporate HTML/CSS into tooltips, your best bet is to utilize a library such as tooltipster, jQuery UI, Kendo UI, or explore other similar options.

Here's an illustration 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on changing an image with a button click

I am currently working on a project where I have a div tag containing an image that is selected randomly from different arrays based on topics. However, I am facing some challenges in making the image change when the "go" button is clicked. I want the if ...

javascripthtml

Attempting to retrieve data from a JSON file according to the choice made by the user in a dropdown menu

My goal is to create a user interface where users can select options from a drop-down list and receive corresponding output based on their selection. The drop-down list options are populated using data from a JSON file, and the desired output is derived fr ...

javascriptjqueryjsondrop-down-menu

Methods for retrieving a file within a nodejs project from another file

Currently, my project has the following structure and I am facing an issue while trying to access db.js from CategoryController.js. https://i.sstatic.net/8Yhaw.png The code snippet I have used is as follows: var db = require('./../routes/db'); ...

javascriptnode.jsexpress

JQuery implementation of Axis webservice call

Trying to invoke my Axis webservice with the code below var wsUrl = "http://localhost:8080/TestServ/services/TestCls?wsdl"; var soapreq = "<soapenv:Envelope xmlns:soapenv=\"http://schemas.xmlsoap.org/soap/envelope/\" xmlns:cod=\"http:// ...

javajavascriptjqueryajaxweb-services

Utilizing a for loop in PHP and the jQuery show/hide method can dynamically display a corresponding number of div elements based on the number

I've used PHP to create a loop that generates divs based on the number of buttons pressed. <?php for ($x = 1; $x <= 6; $x++) { ?> <button type="button"> <span><?php echo $x; ?></span> </button> ...

phpjqueryfor-loop

Transform milliseconds into an ISODate representation

I have a MongoDB collection where records are stored with timestamp in milliseconds. I need to aggregate these records by hour and convert the timestamp to ISODate so that I can use MongoDB's built-in date operators ($hour, $month, etc.) Here is an e ...

javascriptmongodbtype-conversionaggregation-framework

What steps can I take to make the cards in bootstrap 5.3 responsive for mobile devices?

I'm struggling with my code and need some help. I've been editing it, but things seem to be getting worse instead of better. Specifically, I can't figure out how to set up my container, row, and columns in Bootstrap properly. My site uses ca ...

htmlcsssassbootstrap-5responsive-images

What is the best way to line up the columns of various divs?

Is there a way to align the content of these different divs? I'm trying to match up the headers of each column with the corresponding items in the divs below. Can someone assist me in achieving this alignment? row-header-course should align with cou ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Guidelines for utilizing React to select parameters in an Axios request

As a newcomer to ReactJs, I am working with a Product table on MySQL. I have successfully developed a dynamic table in the front-end using ReactJS along with MySQL and NodeJs on the backend. The dynamic table consists of four columns: Product, Quantity, Pr ...

javascriptnode.jsreactjsaxiosreact-select

Differences between the http module and Express framework

After noticing this common pattern, I've become intrigued : const server = http.createServer(app); // Listen on provided port, on all network interfaces. server.listen(port); server.on('error', onError); server.on('listening', on ...

javascriptnode.jsexpress

AddThis plugin in Wordpress is unresponsive when used with a theme that relies heavily

I've been struggling to properly set up the AddThis Wordpress plugin to display share buttons below each post in an AJAX theme. After inserting this code into the custom button field on the settings page: <div class="addthis_toolbox addthis_defa ...

javascriptajaxwordpresspluginsaddthis

Learn how to efficiently disable or enable a button in Angular depending on the selected radio button

In order to disable the button when the remarks are marked as failed. Here is an example scenario: Imagine there is an array containing two to four items. First example: ITEM 1 -> FAILED -> Remarks (required) ITEM 2 -> FAILED -> Remarks (r ...

javascriptangulartypescript

Having trouble changing fonts in JavaScript Photoshop using scripting on certain fonts

I have created a script for photoshop that is designed to change the font family to a different type. However, I am experiencing some inconsistencies in its performance. Here is the section of the script responsible for altering the font family: var origD ...

javascriptphotoshopextendscriptphotoshop-script

Experiencing difficulty in rendering API within React component

Trying to display an image from a specific API that I came across here. However, encountering the following error in the console... Error with Fetch API: TypeError - this.state.dogs.map is not functioning properly. Code snippet provided below: <htm ...

javascripthtmlreactjsstate

Transferring Data to EJS Template

I have been facing a challenge in passing a value from a POST route to an EJS file for display. Despite trying various methods like redirecting, sending, and rendering the results, the data won't make its way to the EJS file. Below is the POST route ...

javascriptnode.jsexpressejs

Customizing your Sharepoint Web part with unique text properties

When a user inputs custom text in a web part property, it will be shown on a form. Here is the code for the web part property located in the testTextWebPart.ascx.cs file: public partial class testTextWebPart: WebPart { private string _customtxt; [We ...

c#jqueryhtmlsharepoint-2010web-parts

Exploring z-indices in event bubbling

JSFiddle: https://jsfiddle.net/uLap7yeq/19/ Issue Let's examine a scenario where there are two elements, canvas and div, positioned in the same location using CSS. The div has a higher z-index compared to the canvas, but how can we make sure events ...

javascriptjqueryhtmlcss

How come Selenium is stopping me from extracting text content from the "ul" and "li" elements?

This piece of code represents my work: from selenium import webdriver from selenium.webdriver.common.keys import Keys # For being able to input key presses import time ...

pythonhtmlseleniumselenium-webdriverweb-scraping

Position various images at specific coordinates on the screen using CSS

Looking for help with positioning four images on the screen using coordinates specified in the code. The top-left coordinate positioning is not displaying properly as intended. Can you assist in identifying and correcting the error? <!DOCTYPE html&g ...

htmlcssimage

The dynamics of Express.js functionalities

I am seeking to better understand how flow functions within an Express app using Routes, with the following set of Routes: app.use(require('./routes/reportsRouter')); app.use(require('./routes/crewsRouter')); app.use(require('./ro ...

javascriptnode.jsexpress