[Jane Marcia]

This is the support topic for the tutorial Add New Icon Links To Footertbar. Please post here if you have any questions or feedback.

This post has been edited by JaneLu: 16 June 2010 - 11:41 AM

[Matze]

Hello,
thanks for the tutorial!
Is it possible to add tooltips to the footerbar?
greetings

[Jane Marcia]

What you mean tooltip? Are you ising. NBS pro theme? Yes it is possible.

[Matze]

No, I not use the NBS pro theme, but I have integrated this tooltip: http://net.tutsplus....y-awesomeness/.
However, the tooltips are not displayed, so I´m not sure if it is possible...
Greetings

[Jane Marcia]

I think you have to add the class to the links

[Matze]

I have added the class to the links, and now, the tooltips are displayed, but I have two problems:

• the tooltips are not exactly displayed over the picture.

CSS code:

.tip {
	width: 212px;
	padding-top: 37px;
	overflow: hidden;
	display: none;
	position: absolute;
	z-index: 500;
	background: transparent url(../image/tipTop.png) no-repeat top;}
	
.tipMid {background: transparent url(../image/tipMid.png) repeat-y; padding: 0 25px 20px 25px;}
.tipBtm {background: transparent url(../image/tipBtm.png) no-repeat bottom; height: 32px;}

Footerbar link:

<li><a href="https://twitter.com/" class="tTip" title="Folge uns auf Twitter" target="_blank" rel="nofollow"> {img theme='layout/twitter.png' alt="Folge uns auf Twitter" class='v_middle'}</a></li>

2. Scroll down, the tooltip remains on the same place.




can you please help me?

Greetings

[Jane Marcia]

can you show me how you have the other links? the one that is working fine? does that happen with them too?
cos this should be correct

<li><a class="tTip" href="https://twitter.com/" title="Folge uns auf Twitter" target="_blank" rel="nofollow"> {img theme='layout/twitter.png' alt="Folge uns auf Twitter" class='v_middle'}</a></li>

This post has been edited by JaneLu: 22 July 2010 - 10:01 AM

[Matze]

Thank you for your reply JaneLu,
unfortunately this did not function, so I tried to include these tooltips: http://flowplayer.or...ltip/index.html & http://code.drewwils...-jquery-plugin.
However, they are not displayed. I think I made something wrong..

template.html.php

Code (between the header tag):

<script src=" http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>	
      <script src="http://www.jugend-treff.net/theme/frontend/jream_awesome/style/blue/jscript/jquery.tipTip.js" type="text/javascript"></script>
<script src="http://www.jugend-treff.net/theme/frontend/jream_awesome/style/blue/jscript/jquery.tipTip.minified.js" type="text/javascript"></script>

Code (before </body>)

 <script src="http://www.jugend-treff.net/theme/frontend/jream_awesome/style/blue/jscript/tip.js" type="text/javascript"></script>

Content of tip.js:

<script type='text/javascript'>    
$(function(){
    $(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10});
}); 
</script>

footer.html.php


Code:

<li><a class="someClass" href="https://twitter.com/jugendtreff2010" title="Folge uns auf Twitter" target="_blank" rel="nofollow"> {img theme='layout/twitter.png' alt="Folge uns auf Twitter" class='v_middle'}</a></li>

Last step, content of the tipTip.css, copied into the layout.css!

I think I made everything correct, but no tooltips

Greetings

This post has been edited by Matze: 22 July 2010 - 10:23 AM