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]
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>
Kod: Zaznacz cały
[ttip=text1]text2,color[/ttip]
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>
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>
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:
Download: