JQuery: Does anyone know of a cool way to do this mouse over effect in jquery? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

开发者_运维知识库

Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.

Closed 9 years ago.

Improve this question

I would like to have these question marks by certain fields where if a user mouses over it brings up a window with a description of the field.

Does anyone know any good tutorials/ways to do this?

---

You can do it with CSS:

.Help {
    display: none;
    ...
}
.Container:hover .Help {
    dislay: block;
}

<div class="Container">
    <input ... />
    <div class="Help"> ... </div>
</div>

This will only show the .Help element when its parent .Container is hovered over.
You would make a separate .Container for each input field.

You should add CSS to .Container and .Help to achieve the layout you want.

---

Google "JQuery Tooltip" if you want a JQuery DOM manipulation solution, there are a plethora of plugins out there and I'm not going to list them all here.

EDIT:

By googling "JQuery Tooltip Tutorial" I was able to find this tutorial from nettuts+ that goes over how to author your own JQuery tooltip plugin. Hope that helps.

---

You can do something like this:

$(".somelinkclass").hover(function() {
  // do something here when user mouses over 
}, function(){
  // do something here when the mouse leaves 
});

---

We use jQuery Tooltip at work to handle our help/info for our form elements. We found it the easiest route to go and ends up being as simple as:

<img src="./MyAwesomeImage.png" title="Some tool tip text"/>

    $("img[title]").tooltip({
        position: "center right",
        tipClass: "infoToolTip",
        offset: [-10, 0]
    });