Syntax of calling is:
Javascript
<script type="text/javascript">
$(document).ready(function(){
$('element_selector').ToolTip('css_class_of_tooltip_div');
});
</script>
This call takes all elements (element_selector) and turns on tooltips made from html code inside attribute title of those elements.
By default it's been used in events calendar, you can watch at events_calendar.tpl for live example.
Here is a code of last visitors tooltip I'm using at the main page "Site visitors" section.
1. I made a copy from ext.members.tpl, saved it as ext.latest_members.tpl and edited image codes in it.
Original:
Text
<a href="{top.virtual_path}{member_profile_link}"> <img src="{top.virtual_pic_path}{member_picture}" alt="{member_username}" border="0" /><br></a>
Changed to:
Text
<a class="tooltip" title="<img src={top.virtual_pic_path}{member_picture} /> <h3>{trim:member_username,20}</h3><p>from {profile_field_city_value}</p> <p>Visited on: {member_last_visit}</p>" href="{top.virtual_path}{member_profile_link}"> <img src="{top.virtual_pic_path}{member_picture}" alt="{member_username}" border="0" /><br></a>
2. After that I added function call at the bottom of ext.latest_visitors.tpl:
Javascript
<script type="text/javascript">
$(document).ready(function(){
$('a.tooltip').ToolTip('nicetooltip');
});
</script>
After page is loaded function takes all elements with name 'a' and class 'tooltip': <a class="tooltip"...
and makes tooltip divs with class 'nicetooltip'.
3. I added css code to content.css to render divs in nicely.
CSS
/* Member tooltip style */
div.nicetooltip {
display: none;
position: absolute;
background: #FFFFCC;
border: 1px solid #FFCC66 ;
color: #333333;
padding: 5px;
width: 180px; /*width of tooltip*/
}
div.nicetooltip h3 {
color:#FF3300;
font-size:12px;
margin:0px;
padding:0px
}
div.nicetooltip p {
font-size:11px;
color:#333333;
margin:0px;
padding:3px;
}
div.nicetooltip img {
width:70px;
border: 1px solid #999999;
margin-right: 5px;
float:left;
}
You can take this .css code as start point for your further experiments.
4. I called latest visitors in homepage.tpl using regular {members:} extension:
Text
{members:limit=9,cache_time=1,cache_name="sitevisitors",orderby="lastvisit", template="ext.latest_visitors.tpl"}
As you can see I set orderby=lastvisit to order by last visit time and I set template="ext.latest_visitors.tpl" to render data using ext.latest_visitors.tpl
After few tests and complete understanding "how it's made" you'll be able easily create online list with tooltips, details tooltip to album picture thumbnails and many more.
This is ext.latest_visitors.tpl I use on this website: link
Let's discuss any other variants of using tooltips on our websites. You can attach screenshots of your works in post comments.
Comments
champagnero
i use it in pinkydates 2.6.0 it works in sidebar (ext.members_online.tpl) and in homepage if logged in with popular members / new members (ext.members.tpl)
I love it. Its great. In Homepage if not logged in i have the problem that the tooltip is behind the pictures.
its obviusly something with divs and css in ext.members_block.tpl but i dont have the idea to bring it in front of the picture. Who can help?
THX for every idea
topfan
1- I downloaded it ext.latest_members.tpl to my nightlife template
2- I added CSS to content css in nightlift template
3-add the {members:limit=9,cache_time=1,cache_name="sitevisitors",orderby="lastvisit", template="ext.latest_visitors.tpl"}
to my homepage.tpl
so what am i missing?
i see pierrehs did it. Can you help.
Thanks
pierrehs
it works
pierrehs
I have version 2.5.7 and the theme NightLuv of Luvpoint
I put the code in ext.members_home.tpl
Can you help me
Here is my site : http://rencontreados.cool-on-web.com/
Thank
timaria
gugu
but I can do it later this week ...
if I can get it to work I will tell you about it !
timaria
I wish someone can put all the same toturial step by step for vld 2.5.6 .
gugu
This is ext.latest_visitors.tpl I use on this website: link
click on the link and download the file ...
Pages
1 2 3 4Log in to leave a comment