adding tooltip question

Question

Julia25 0 Light Poster

11 Years Ago

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>

javascript

2 Contributors
9 Replies
201 Views
19 Hours Discussion Span
Latest Post 11 Years Ago Latest Post by AleMonteiro

AleMonteiro 238 Can I pick my title?

11 Years Ago

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.

AleMonteiro 238 Can I pick my title?

11 Years Ago

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.

AleMonteiro 238 Can I pick my title?

11 Years Ago

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

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Julia25 0 Light Poster · Answer 1 · 2013-01-24T21:08:37+00:00

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

Julia25 0 Light Poster · Answer 2 · 2013-01-24T21:21:38+00:00

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

Julia25 0 Light Poster · Answer 3 · 2013-01-24T22:26:46+00:00

yes i can i add javascript or link to jquery script

AleMonteiro 238 Can I pick my title? · Answer 4 · 2013-01-25T01:38:51+00:00

Ok, this will be easy and painless ^^

There's a lot of nice jQuery ToolTip plugins. Take a look at those sites:

http://calebjacob.com/tooltipster/
http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/
http://jqueryui.com/tooltip/

Most of them will use the attributes Title for the text, so you can make like this before using the plugins:

$("#addtocart")
    .attr("Title", "My tooltip text")
    .tooltipster();

Julia25 0 Light Poster · Answer 5 · 2013-01-25T12:01:20+00:00

Thanks a lot!
its working!

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

AleMonteiro 238 Can I pick my title? · Answer 6 · 2013-01-25T14:15:23+00:00

Good to know. You're welcome.

Just mark the post as solved please.