0

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>
2
Contributors
9
Replies
11
Views
4 Years
Discussion Span
Last Post by AleMonteiro
0

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.

0

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

Edited by Julia25

0

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.

0

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

0

Thanks a lot!
its working!

    <script type="text/javascript">
        $(document).ready(function() {
            $('#addtocart').attr("Title", "My tooltip text").tooltipster({
                animation: 'fade',
                position: 'right'
            });
        });
    </script>
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.