Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
+3 votes
4.1k views
in Q2A Core by

Has anyone been able to use Jquery to enhance the alt button text on mouseover?  I am specifically interested in the alt text of vote and comment buttons.

I have seen a jquery tooltip plugin, but cannot figure out the Jquery code to target all of the input elements for tool tips.

http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

1 Answer

+2 votes
by
 
Best answer

I was able to get this to work on my own Q2A site.
I used a different tool-tip plugin.

Here is how i did it.
1. Place a link to Jquery script in your site's footer.  I used it hosted at google ajax apis. 

2. Place a link to the Jquery tools tool tip plug in in your site's footer. I downloaded a copy of just the tooltips. You can also link it directly from their site if you want the whole thing

http://flowplayer.org/tools/download/index.html

3. Add the following Javascript Code to your page...  

<script type="text/javascript"> 
 
 $(document).ready(function() {
    //begin tooltips
    $(".qa-main :input").tooltip({
        position: "top center",
        offset: [-8, 0],
        effect: "toggle",
        opacity: 1.0,
         delay:0
    }); //end tips
});
</script>     

4. Add the following CSS to your site's css file or Q2A theme.

 

/* simple css-based tooltip */
.tooltip {
z-index:999999;
background-color:#cbffc9;
border:2px solid #225a20;
padding:7px 10px;
width:200px;
display:none;
color:#225a20;
text-align:left;
font-size:12px;
font-weight:bold;
 
-moz-box-shadow:0 0 5px #999;
-webkit-box-shadow:0 0 5px #999;
}
 
 
You can customize the css to get the tips to look however you want.  And can play with the options of the tooltip plugin for effects, position etc. 
 
Cheers
 
Frank
by
Great Info thanks
by
Hope it works out for you.
by
edited by
Very nice TY ... for me work greate!

LATER: Something work wrong: When i try to edit a question the "Cancel" button only appears when the mouse has put on "Save" button like a title/tooltip. How can i fix it?
...