How do you run javascript with only a CSS class?


Tags: javascript,html,css,json

Problem :

I am working on a web site project which requires that the web page display tooltips on hover. For reasons I won't go into here, I decided to use a library from a site called dyn-web.com. The library works great but I need to make one small change to the way it works, which will make it a perfect fit for my application. Trouble is, I can't figure out how it works!

Everything I've read says that you can't execute javascript code from within CSS. But that seems to be exactly what this library does. To create a tooltip for any element (anchor, div, span, etc), all this library requires you to do is:

  1. Include a <script src= > tag to the library file
  2. Add two class names to the HTML element that will host the tooltip, one called "showTip" and the other is a key into a JSON object containing the tooltip text
  3. Add the tooltip text to the JSON object mentioned above
  4. Create a style to format the tooltip how you want it to look

If you'll notice, nowhere in these steps is mention of any event handlers. Moreover, there's no class (that I can find) called showTip. There's no JQuery or other dependencies. So how does the javascript get executed?

I don't want to jump in and start changing the library willy-nilly without knowing how it works, and I've been pulling out my hair trying to figure it out. Can one of you smarter-than-me folks explain it?



Solution :

From the steps you listed, it seems as if Dynamic Web Coding library uses the JavaScript to apply CSS attributes into elements. You can not run JavaScript inside CSS, but you can certainly apply CSS using JavaScript!

What the library probably does is look at all of the elements with class showTip with JavaScript using document.getElementsByClassName("showTip"). Then, it looks at the other class on that element and assumes that as the key to the tooltip with the tooltip text.

Then, it probably creates an element for the tooltip using document.createElement() and then injects that into the document using document.appendChild() or document.insertBefore(). They can probably add some class to the tooltip so your CSS rules are applied using the .className property.

It also likely used document.addEventListener() to listen for when the user hovers over and leaves the element. You don't need to add this code because the <script> tag you added has called document.addEventListener() for you.

All of these things require something known as the DOM which is something JavaScript coders use to manipulate the HTML document. This is actually really powerful and cool, so you can check out a good tutorial on it at TutorialsPoint.


    CSS Howto..

    How to remove the yellow row highlighting

    How do we change the color and size of dingbat unicode characters in mobile Safari? (html entities)

    How to apply multiple css radial gradients to a single element

    PHP: _POST and CSS, how to show an active link

    How To Wrap A Div When Parent Container Shrinks Using CSS

    How to set animation in css?

    HTML/CSS - How to set text (e.g. 'Quote of the Day') to change automatically on page load/reload?

    How to ignore CSS img styling for certain sections of the website?

    How to access CSS children properly?

    How to add drop down menu using CSS?

    How to implement dynamic layout columns by using the `content_for?` method?

    How To Display first 50 characters Of Text [closed]

    How to use a text file's contents in HTML as text [duplicate]

    How to select a td by position of its relative th?

    How can I use CSS borders to visually group my sections?

    CSS page headers - how to use print margins?

    how to setup css value for “-webkit-transform” in the “animate” method? [duplicate]

    How to Bring a h1 to top of the div?

    How to vertically center text span in fixed position div?

    How does Matt Haughey's blog insert rosettes in each post title? [closed]

    How to display a css animation in the center of the screen

    how to position div with css and force text to wrap around

    How to write CSS3 animations with JavaScript objects?

    How do you select a radio button in css?

    How to do line animation using CSS and SVG

    How to deal with different screen resolutions in CSS?

    how can i force all rows in a table to have the same height

    how to set border in firefox

    how to link css files in organization github pages

    How to override default css style rule of Bootstrap