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 reference this line in CSS, HTML

    how to find a css class which has another css class as sibling

    How to set display none on tag using css?

    how to change the background colour of entire body except a sidebar div

    how to set responsive background-image of element using css?

    How do I get IE to display CSS DIV tables properly?

    How to give multiple arguments to find element by css selector

    How to style HTML select option hover and selected option effects

    how to make an image “coming” to foreground

    how to open a menu with a button?in html

    CSS How to create a container with non-linear borders

    How to put a button inside of a text entry field in a form on a website using javascript, css, html

    How to explain using browser.sleep in protractor

    how to get the value of css style using jquery

    How to build a responsive padding for list menus using CSS?

    How to display a list in two rows?

    How to Grab an Icon Image

    How to set a image over another in the same tag via CSS?

    All sections show over fixed header when scrolling

    server-side control - how set background with css ? (link & hover)

    How do i use floats for images while using
    so that
    still shows under image?

    css/jquery - how to hide last row of floated elements if not even

    How do you switch the cursor to a pointer cursor when hovering over the bars in a Kendo UI bar chart

    CSS Web fonts how to use it with use of @font-face its not working

    How to run PHP through Adobe Muse generated CSS

    How to create a table with CSS [closed]

    How to create gradient background with CSS in Firefox < 3.6?

    How to fix IE7 float-clear combination

    How to target all elements, except last one with css?

    How to combine multiple CSS declarations to shorthand