Home/ Questions/Q 8134363
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T09:59:43+00:00

I want to use this jquery library for my web page. I am copying

  • 0

I want to use this jquery library for my web page. I am copying all the code in the article page and then pasting into my .html file as below:

<html>
    <head>
        <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
        <script type="text/javascript">
            $("document").ready(function(){
                $("#demo img[title]").tooltip();
            });
        </script>
    </head>
    <body>
    <br />
    <br />
        <div id="demo">
          <img src="image1.jpg" title="The tooltip text #1"/>
          <img src="image2.jpg" title="The tooltip text #2"/>
          <img src="image3.jpg" title="The tooltip text #3"/>
          <img src="image4.jpg" title="The tooltip text #4"/>
        </div>
    </body>
</html>

But .tooltip class style is not running. I can’t see the background image and others.
How do I need to edit my .html file?

Also if I want to change this library’s css styles how can I?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Working demo http://jsfiddle.net/QWeKw/2/ or http://jsfiddle.net/XUhxQ/

    You can make your own styling.

    Very good link: http://jquery.bassistance.de/tooltip/demo/ or http://docs.jquery.com/Plugins/Tooltip

    This should help,

    code

    $("img[title]").tooltip({
    events: {
        def:     "mouseenter,mouseleave",    // default show/hide events for an element
        input:   "focus,blur",               // for all input elements
        widget:  "focus click,blur",  // select, checkbox, radio, button
        tooltip: "mouseenter,mouseleave"     // the tooltip element
    }
});

    css inside demo

    .tooltip {
    font-family:tahoma;
    background-color: #000000;
    border: 1px solid #FFFFFF;
    box-shadow: 0 0 10px #000000;
    color: #FFFFFF;
    display: none;
    font-size: 12px;
    padding: 10px 15px;
    text-align: left;
    width: 200px;
}​

    Working image

    enter image description here ​

    • 0