Creating custom CSS data-tooltip for image maps without the use of jquery

I stumbled upon the Pure CSS Tooltips (data-tooltip) feature showcased at 

http://www.frequency-decoder.com/demo/css-tooltips/
, and I am eager to implement it on a specific area of an image map in a rectangular shape. However, despite finding a JavaScript code snippet that somewhat works, I have been struggling to integrate the "Pure CSS Tooltips (data-tooltip)" functionality seamlessly with my image map area.


   <style type="text/css">
   body {
       background-image: url(background.gif);
       text-align:center;
       font-size:14px;
       line-height:1.4;
       font-weight:normal;
       font-family:cambria,georgia,times,serif
   }
    /* Make tooltip "links" have a different pointer */
    [data-tooltip] {
        cursor:pointer !important;
    }
    
    /* Styles for elements having a data-tooltip attribute */
    *[data-tooltip] {
        position:relative;      
        cursor:help;
        text-decoration:none;   
        border-bottom:1px dotted #aaa;     
    }

    /* Default :before & :after values */  
    *[data-tooltip]:after,
    *[data-tooltip]:before {
        content:"";
        opacity:0;  
        z-index:999;
        ...
        ...
    }

    /* Tooltip arrow - shown on hover or focus */
    *[data-tooltip]:hover:before,
    *[data-tooltip]:focus:before {
        ...
        ...

    }
    ...
    ... 
</style>

I've shared the necessary HTML and CSS codes along with the image map coordinates, but alas, I still can't achieve the desired outcome. Hopefully, someone skilled in this domain can swiftly resolve my dilemma before time runs out. Rest assured, I am more than willing to credit my savior within the HTML scripts of my website pages.

javascripthtmlcsstooltip

Answer №1

Have you considered implementing a CSS class for all your tooltip elements?

<div class="1 myCustomTooltipClass">
    <label>Display the Pure CSS Tooltip here</label>
</div>

You can then define this new css class in your stylesheet:

.myCustomTooltipClass { ... }

This approach eliminates the need for JavaScript to style your tooltips.

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

Loading Angular.js scripts into the webpage

My app is built using the MEAN stack. When a user visits the URL: http://localhost:3000/edit/0 Where 0 represents a record id. Initially, it seems like everything should work fine, but I am facing an issue where my scripts are not loading in the edit.js ...

javascriptangularjsmean-stack

Looking to assign a variable to the value selected from a dropdown menu in PHP/HTML

As a beginner in php and html, I have been tasked with creating a drop down list along with other inputs to establish parameters for a perl script. The objective is for the selected option from the drop-down menu to set a variable equal to the user's ...

phphtmldrop-down-menu

The hyperlink does not function properly when included within an <input type=button> element

I have encountered an issue with the code below. In my project, I have a search bar along with some buttons. Currently, only the hyperlink of the search button is functioning correctly. The other buttons seem to redirect to the same link as the search bu ...

javascriptphphtmlcss

Using javascript to locate and substitute a word divided among multiple tags - a step-by-step guide

I need to utilize JavaScript to locate and substitute a word that has been separated into multiple tags. For instance, consider the following HTML code: <html> <body> <div id="page-container"> This is an apple. ...

javascripthtmlnode.js

Using regex to confirm prices are accurate

Can anyone assist me with validating input using regEx in Vue? I'm struggling to create one and haven't been able to find the correct pattern online for what I need. The specific validation I am attempting is for a price value that should be a f ...

javascriptregexvue.js

Error in material mapping: glDrawElements is trying to access vertices that are out of range in attribute 2

I have developed an algorithm that allows users to input data or a function and then generates a graphical representation of the function. It essentially creates a surface map, similar to the one you can see here. The graphing functionality is working well ...

javascriptthree.js

Switch up the order of columns by utilizing the push and pull features of Bootstrap

My layout consists of 3 columns arranged like this: <div class="container-fluid"> <h1>Hello World!</h1> <p>Resize the browser window to see the effect.</p> <div class="row"> <div class="col-sm-3">left co ...

htmlcsstwitter-bootstrap-3responsive-design

The required keys [:id] are not included in the route matches

As a beginner in Rails, I've encountered similar issues that I can't seem to resolve. Here are my routes: resources :users do resources :items end My model setup is as follows: class Item < ActiveRecord::Base belongs_to :user end cl ...

htmlruby-on-railsrubypathroutes

Utilize the ng-file-upload library to easily upload files to MongoDB's GridFS

I need to upload a file larger than 16MB to my Mongo database. I am using the ng-file-upload module on the front end (https://github.com/danialfarid/ng-file-upload). On the back-end, I am utilizing connect-busboy and gridfs-stream modules. However, I enc ...

javascriptangularjsnode.jsmongodbgridfs-stream

What could be causing the issue with Virtual Populate not functioning on Node.js and Mongoose? Here's the scenario: User provides

When a user gives a review on a specific product ID, it is stored in the review model database instead of the product model database. Virtual populate is used in the product model to display the user review in JSON format without saving it in the database. ...

javascriptnode.jsmongodbmongodb-querymongoose-populate

Managing Events in PHP

As a .net developer working on a php site for a friend, I've been making good progress. However, I have a question - is there something similar to a textchanged event in php? Here's what I'm trying to achieve: I want to dynamically populate ...

phphtml

To avoid 'stacking', reset a div after it has been faded in

I am currently using code that displays a scroll to top button. $(window).bind("scroll", function() { if ($(this).scrollTop() > 100) { $("#totop").fadeIn(); } else { $("#totop").stop().fadeOut(); } The opacity of this div is set to 0.8. Howeve ...

javascriptjqueryhtmlcss

Implementing a basic marker clustering feature in the Google Maps application

I'm currently experiencing issues with implementing marker clusterer functionality on my map. I am trying to use a custom icon for each marker and have individual info windows that are editable. I was able to achieve this, but now I am facing difficu ...

javascriptgoogle-mapsgoogle-maps-api-3markerclusterer

By utilizing the <tr> element, one can enhance the border thickness by 1 pixel

Is it possible to ensure that row selection in a table is consistent in terms of border alignment on both sides? https://i.stack.imgur.com/qmZiQ.png If you have any suggestions or solutions, please share them. Thank you! table { margin: 10px; bord ...

htmlcsshtml-tableborder

What could be causing my CSS to malfunction when I include two parameters in app.get?

While developing an express app, I encountered an issue where my CSS code stopped working whenever I added an ":ID" parameter to the URL. It seems like a filepath problem because bootstrap is still loading fine, but on the specific page with the ID paramet ...

csstwitter-bootstrapexpress

The useAutocomplete function in Material-UI fails to consider the disabled

Currently, I am working on developing my own Autocomplete component by utilizing the useAutocomplete hook from the mui/base package. Most parts of the implementation are functioning correctly, except for the disabled option. My expectation is that the com ...

javascriptreactjstypescriptmaterial-uiautocomplete

The panel element is being encroached upon by a sidebar

I'm currently developing a basic chat application and I'm in need of a collapsible sidebar for users to select different chat rooms. Unfortunately, the current fixed sidebar is overlapping the panel element where the chat conversations are suppos ...

jqueryhtmlcsstwitter-bootstrap

Django CSS graphical interface for selecting styles

I am looking to implement a feature that allows users to select an "interface theme": To enable users to change the theme across all templates, I have created a dropdown in my base.html. For all my HTML templates, I utilize a base.html file by extending ...

cssajaxdjangodjango-templates

Choose a sibling element using CSS styling

As I'm developing an AngularJS component, I am on the quest to identify ANY sibling of a particular tag, irrespective of whether they are div, span, or p. I'm hoping for a CSS-native solution that resembles something along the lines of div:siblin ...

htmlcssangularjscss-selectors

The challenge of handling scopes in Angular-seed

I am currently facing a challenge with creating a pre-routeProvider post. The problem I'm encountering is that $http is coming up as undefined, even though I am passing it to the function as per my understanding. I have made sure to declare angular.js ...

javascriptangularjsscopeangular-seed