ToolTip2

Forum z dodatkowymi znacznikami BBCode, przeznaczonymi do wykorzystania na własnym forum. Przed zgłoszeniem problemu zapoznaj się z instrukcją dodawania znaczników BBCode.
Awatar użytkownika
all4phone
Posty: 60
Rejestracja: 20 lipca 2012, 10:30
Kontakt:

ToolTip2

Post autor: all4phone » 05 sierpnia 2012, 17:57

Nazwa BBCode: ToolTip2
BBCode daje możliwość dodania ukrytej informacji, która wyświetla się w animowanym dymku po przesunięciu kursora myszki nad słowo kluczowe.

Autor: all4phone

Info: BBCode utworzony na podstawie "Build a Better Tooltip with jQuery Awesomeness", oto demo. Na potrzeby BBCode'a zmodyfikowałem trochę załączone grafiki oraz zmieniłem ustawienia parametrów animacji.

Dodaj/zmień znacznik BBCode:

Kod: Zaznacz cały

[ttip={INTTEXT}]{TEXT},{COLOR}[/ttip]
Zamiennik HTML:

Kod: Zaznacz cały

<style type="text/css">
.tTip {
	width: 200px;
	cursor: pointer;
	font-weight:bold;
}
.tip {
        font-size:11px;
	color: #506070; // clolour of tooltip text
}
.tip {
	width: 300px;
	padding-top: 37px;
	overflow: hidden;
	display: none;
	position: absolute;
	z-index: 500;
	background: transparent url('styles/prosilver/theme/images/top.png') no-repeat top;
}
	
.tipMid {
	background: transparent url('styles/prosilver/theme/images/mid.png') repeat-y;
	padding: 0 25px 20px 25px;
}
.tipBtm {
	background: transparent url('styles/prosilver/theme/images/btm.png') no-repeat bottom;
	height: 32px;
}
</style>
<span class="tTip" title="{INTTEXT}"><span style="color: {COLOR}">{TEXT}</span></span>
Podpowiedzi:

Kod: Zaznacz cały

[ttip=text1]text2,color[/ttip]
Przykład:

Kod: Zaznacz cały

[ttip=ukryty tekst]info tekst,color[/ttip]
-----------------------------------------------------------------------------------------------

Dodatkowe edycje:
Otwórz: styles/prosilver/template/overall_header.html
Znajdź:

Kod: Zaznacz cały

</head>
Dodaj przed:

Kod: Zaznacz cały

<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/jquery.betterTooltip.js"></script>
<script type="text/javascript">
		$(document).ready(function(){
			$('.tTip').betterTooltip({speed: 300, delay: 300});
		});
</script>
Dodatkowe pliki (prześlij na serwer):
styles\prosilver\template\jquery-1.7.2.min.js
styles\prosilver\template\jquery.betterTooltip.js
styles\prosilver\theme\images\btm.png
styles\prosilver\theme\images\mid.png
styles\prosilver\theme\images\top.png


Screen's:
1.PNG
(50.96 KiB) Pobrany 28983 razy
2.PNG
(54.13 KiB) Pobrany 28984 razy
3.PNG
(40.53 KiB) Pobrany 28984 razy

Download:
Załączniki
pliki.zip
(37.73 KiB) Pobrany 371 razy

Zablokowany