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 can one fix a CSS3 graident background when using a box for content?

    How can I properly add CSS and JavaScript to an HTML document?

    How to center absolutely positioned elements in css for a pdf

    Creating a javascript notification plugin: How to align absolutely positioned divs on top of each other

    c# cassette - how to create different css bundles for different pages

    How to remove CSS mousedown effects

    How can I use this php empty function to properly display CSS?

    How to develop a webpage with Bootstrap [closed]

    how to change element css class runtime using javascript

    Change Color Themes - How To Prevent the Site Goes Back to Default

    How do I make the box smaller in html?

    How to adjust responsive behaviour of menu bar's elements

    how to change the opacity of the text along with the colorscale of the image in css?

    Why does the dropdownlist show under the div

    How to create a responsive popup using fancybox 2?

    How i can make it wiht css3?

    How to put a background video loop on a website HTML/CSS

    Flexbox in Chrome--How to limit size of nested elements? [duplicate]

    PrimeFaces 3.0 - How do I override the default opacity of a dialog overlay?

    How to force divs into the same row when using Blueprint CSS

    How to arrange three flex div side by side

    how to make div fixed at a particular scroll level

    How to set ID or css selector for new row added in table using javascript

    How to render email template in a page?

    How to create CSS/JavaScript circles grid

    how to make certain css 3d effect works in IE

    Element width based on how many siblings are present

    How to turn off visjs active shadow box?

    How to center dropdown menu under parent tab?

    How to remove “gap” from nav bar and line?