Separating text for tooltips from the element itself

I'm looking to enhance my website by adding tooltip descriptions to elements based on their CSS classes.

While tooltips are usually added using the element's title attribute, I have numerous elements with the same lengthy description and want to avoid unnecessary code repetition. Instead, I prefer defining the text separately and then somehow linking it to specific classes.

Unfortunately, based on my research, it appears that achieving this goal with just HTML and CSS is not possible, though a succinct Javascript or jQuery solution would suffice. Can anyone provide guidance on how to accomplish this?

Extra credit if the text can be combined for elements with multiple classes. :P

javascriptjqueryhtmlcsstooltip

Answer №1

With the power of CSS alone, you can experiment with the "tooltip" class below:

.tooltip:after {
    display: none;
}

.tooltip:hover:after {
    display: inline;
    position: absolute;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 1px 1px 4px #000;
    background-color: #fff;
    margin-left: 5px;
    margin-top: -25px;
    padding: 3px;
}

Next, assign your elements a specific class, for example, "test". In your CSS file, add this:

.test:after {
    content: "Insert whatever text you prefer";
}

DEMONSTRATION: http://jsfiddle.net/ec2Tx/

I have highlighted the tooltip components in the demo to help clarify what needs to be hovered over.

Answer №2

Looking ahead: In my search for a solution to combining tooltip text, I devised a straightforward jQuery method. Essentially, to address each class that needs a detailed description, include the following code:

$(".classX").hover(
    function() {
        var previous = $(this).attr('title') || '';
        var descr    = "description X"
        $(this).attr('title', previous + descr);
    }, function() { $(this).attr('title', ''); }
);

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

Clicking on a link does not place the focus on the corresponding input field

My project involves creating a One Pager website with a navigation menu. I am looking to implement radio inputs that are associated with the clicked link (a) so that I can apply CSS styles to the active radio button. Currently, the CSS is applied when the ...

htmlcss

How to use jQuery to gather all the text from a textarea

Is there a way to automatically select all text inside a textarea when it is clicked on? Additionally, can this selection be deselected by clicking again? ...

javascriptjqueryformstextareaselection

I'm having trouble with my basic routing set up and I'm struggling to understand why it's not working

I'm currently working on a node tutorial and facing some challenges with my routes.js file. Previously, everything was functioning well today as the Node server was able to read the file. However, it seems to be ignoring it now for some unknown reaso ...

javascriptnode.jsmongodb

Organize objects neatly in a grid formation

I have a .test div with grid-template-columns: auto auto auto;. The column width is set to vary based on the element width, and I also used justify-content: start; to align the columns to the left. I chose to use auto instead of 1fr to prevent the columns ...

css

Unable to toggle sidebar in Angular Material component

I'm trying to create a template similar to Youtube using angular material, but I've hit a roadblock with the sidebar navigation. Here are the requirements for the template: 1. The sidebar should be open by default (based on screen size) 2. When t ...

htmlangularjsangular-material

Vue JS i18next: Handling Single Translation String Fallbacks

Recently, I've been utilizing i18next, and I decided to set a fallback value for some translated strings in case they are not available in the selected language. Here's an example: en: base.json "yes": "yes" "no": "no" fr: base.json ...

javascriptvue.jsinternationalizationi18next

Short-circuiting async flows on non-error events in Node.js

Node implements the CPS convention for callbacks. Typically, when a function encounters an error, it is common practice to either handle the error or callback the error to the parent function by utilizing something like return cb(err). One challenge I fac ...

javascriptnode.jsasynchronous

Replicate the texture using Three.js

I am seeking to assign the left half of a video texture to the left Geometry and the right half of the video texture to the right Geometry. var video = document.createElement("video"); var texture = new THREE.Texture(video); texture.offset = new THREE.Ve ...

javascriptthree.js

AngularJS Error: The method serviceName.functionName() is not a valid function

I am trying to implement a function that will go back when the cancel button is clicked. Here is the view code: <div ng-controller="goodCtrl"> <button class="btn" ng-click="cancel()">Cancel</button> </div> And here is the Jav ...

javascripthtmlangularjsmodel-view-controller

Attempting to navigate a tutorial on discord.js, I encountered an issue labeled as "Unknown application" that disrupted my progress

I attempted a tutorial for discord.js, but encountered an error message saying "DiscordAPIError[10002]: Unknown Application." Even though I checked my clientID and applicationID and they seem to be correct! You can find the tutorial here. Here is the co ...

javascriptnode.jsdiscord.js

Transitioning to Vue 3: [Vue warning]: Prop already has a computed property named "actions"

Currently in the process of migrating a Vue 2 application to Vue 3, I've encountered an issue where I am frequently seeing this warning: [Vue warn]: Computed property "actions" is already defined in Props. This warning pops up in various c ...

javascriptvue.jsvuejs3

Hide the row count in a JQuery datatable

I recently implemented a jQuery datatable plugin in my HTML table using the following code: (#client-table).dataTable() After the implementation, it now shows "Showing 1 to 3 of 3 entries" below the table. I'm wondering if there is a way to hide or ...

jqueryjquery-pluginsdatatables

What are some strategies for postponing the execution of a basic function for an

Whenever I develop microservices, I often come across situations where one function contains multiple other functions. For instance: functionA(); functionB(); functionC(); return json({status: processed}); All the functions within this block are synchro ...

javascriptnode.js

The implementation of binding complex types through Ajax in the model

I'm currently working on implementing a Controller with a method structure like this: public ActionResult Insert(Author author) { //perform some operations... } The Author type is defined as follows: public class Author { public string FirstNam ...

jqueryasp.net-mvcajax

Calculating the number of duplicate elements in an array

I need help with displaying the elements of an array while also counting duplicates. For example: myArr = ['apple', 'apple', 'orange', 'apple', 'banana', 'orange', 'pineapple'] The out ...

javascriptarrays

At what point does a box create an inline formatting context?

According to my research, I came across a situation where a block formatting context is generated as explained in MDN:Block formatting context. I am curious about the scenarios that lead to the establishment of an inline formatting context within a box. ...

css

Instructions on how to make a radio button selected when clicked are as follows:

My radio button is currently checked, but I would like it to be onclicked because there is a Javascript function that uses the on.click function. Are there any possible methods or examples to achieve this? <label style="margin-left:177px;">Order Ty ...

javascripthtml

Using Angular JS to submit forms on a regular basis

My HTML form is set up within an Angular controller with inputs, action, and other elements already defined. The only issue I'm facing is that the form does not have a traditional submit button. Instead, there is a separate button on the page outside ...

javascriptangularjsforms

Can PHP code be extracted from a file that has been loaded by other PHP code?

I am importing HTML/PHP code from an external text file using the following code: $f = fopen($filename, "r"); while ($line = fgets($f, 4096)) { print $line; } Is there a way for the server to interpret the PHP code within this file? Currently, I am me ...

phphtml

What strategies can be implemented to maximize memory and CPU efficiency in NodeJS and Express?

My Node app, running on Express, utilizes a web scraping tool to gather and analyze data. While NodeJS is praised for its scalability and ability to handle numerous concurrent connections, I've noticed some difficulties when operating a web scraper t ...

javascriptnode.jsexpressweb-scrapingvps