Im currently customizing a softwared driven site
which has a lot of limitation, i can add new properties on existing css class and thats it.
I was ask to add a tooltip to a certain class but no success.
is it still possible to
add a tooltip in "buy" button by adding or just adjusting the existing css? or maybe a javascript?

</head>

<style type="text/css">


.btn-BuyOff2 {
    background-color: #DDBBFE;
    border-style: none;
    border-width: 0;
    color: #A3238E;
    font-size: 9pt;
    font-weight: bold;
    text-decoration: none;
}
.btn-BuyOff {
    background-color: #DDBBFE;
    border-style: none;
    border-width: 0;
    color: #A3238E;
    font-size: 9pt;
    font-weight: bold;
    text-decoration: none;
}
.btn-BuyOn {
    background-color: #A882E0;
    border-style: none;
    border-width: 0;
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    text-decoration: none;
}
.btn-BuyOn2 {
    background-color: #DDBBFE;
    border-style: none;
    border-width: 0;
    color: #A882E0;
    font-size: 9pt;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;

}

   </style>

<body>
<!--cannot modify-->
<td class="btn-BuyOff2" align="center">
<input id="buyid" type="hidden" value="1027" name="buyid">
<input type="hidden" value="28" name="category">
<input type="hidden" value="" name="itemid">
<input id="qty" class="input" value="1" maxlength="6" size="6" name="qty">
<input id="addtocart" class="btn-BuyOff2 hastip" type="button" onclick="if (document.forms['form1027'].onsubmit()) { document.forms['form1027'].submit(); } return false;" onkeypress="window.event.cancelBubble=true;" onmouseout="this.className='btn-BuyOff2'; return true;" onmouseover="this.className='btn-BuyOn2 hastip'; return true;" name="addtocart" value="Buy">
</td>
<td></td>

</body>
</html>

To show the default tooltip just add the attributes title="Buy" and alt="Buy".

If you want a more sofisticated tooltip you'll need javascript to create it.

Thanks for the reply but this is a software driven site and cannot add or modify the

<td class="btn-BuyOff2" align="center">
<input id="buyid" type="hidden" value="1171" name="buyid">
<input type="hidden" value="27" name="category">
<input type="hidden" value="" name="itemid">
<input id="qty" class="input" value="1" maxlength="6" size="6" name="qty">
<input id="addtocart" class="btn-BuyOff2" type="button" onclick="if (document.forms['form1171'].onsubmit()) { document.forms['form1171'].submit(); } return false;" onkeypress="window.event.cancelBubble=true;" onmouseout="this.className='btn-BuyOff2'; return true;" onmouseover="this.className='btn-BuyOn2'; return true;" name="addtocart" value="Buy">

The only thing i can change is the css by adding some properties:( im not sure on if javascript will be possible, but im hoping theres a work aroud

Oh I see... well, only with CSS it's impossible. With JS is possible, and if it can use jQuery it'll be a lot easier.

ive tried different css but not working, dont know much about JS. hope someone can help

But can you add javascript code to your site? Does the site uses jQuery?

yes i can i add javascript or link to jquery script

Thanks a lot!
its working!

    <script type="text/javascript">
        $(document).ready(function() {
            $('#addtocart').attr("Title", "My tooltip text").tooltipster({
                animation: 'fade',
                position: 'right'
            });
        });
    </script>

Good to know. You're welcome.

Just mark the post as solved please.