Help with tooltip in Joomla 3

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Giorgi_964758
Joomla! Intern
Joomla! Intern
Posts: 67
Joined: Mon Mar 27, 2017 5:05 pm

Help with tooltip in Joomla 3

Postby Giorgi_964758 » Thu Sep 07, 2017 8:16 am

Hi ! I created tooltip, works good. I pasted this code into "new article" using "Sourcerer Extension"

Code: Select all

{source}

<div class="tiptext">Text
<div class="description"> Cloud Atlas is a 2012 German-American science fiction film written and directed by The Wachowskis and Tom Tykwer. Adapted from the 2004 novel of the same name by David Mitchell, the film has multiple plots set across six different eras, which Mitchell described as "a sort of pointillist mosaic."</div>
</div>

<script language="javascript" type="text/javascript">
$(".tiptext").mouseover(function() {
$(this).children(".description").show();
}).mouseout(function() {
$(this).children(".description").hide();
});

</script>

{/source}


Image

But now I need apply this tooltip for the image. How can I do it ? I replaced class .tiptext with class .img-thumbnail, but it doesn't work ! Help !


<script language="javascript" type="text/javascript">
$(".img-thumbnail").mouseover(function() {
$(this).children(".description").show();
}).mouseout(function() {
$(this).children(".description").hide();
});


Image

SharkyKZ
Joomla! Guru
Joomla! Guru
Posts: 800
Joined: Fri Jul 05, 2013 10:35 am
Location: Unknown

Re: Help with tooltip in Joomla 3

Postby SharkyKZ » Thu Sep 07, 2017 9:58 am

This won't work because .img-thumbnail is not the parent of .description. If you have only one set of thumbnail and tooltip on the page, you could change $(this).children to just $.

Otherwise you can wrap each set and use the wrap as parent class. Another option would be to use unique IDs or data attributes.

Giorgi_964758
Joomla! Intern
Joomla! Intern
Posts: 67
Joined: Mon Mar 27, 2017 5:05 pm

Re: Help with tooltip in Joomla 3

Postby Giorgi_964758 » Thu Sep 07, 2017 11:48 am

Thanks for reply !

like that ?

Code: Select all

<script language="javascript" type="text/javascript">
$(".img-thumbnail").mouseover(function() {
$(".description").show();
}).mouseout(function() {
$(".description").hide();
});
</script>


Works !!!

MANY THANKS !

SharkyKZ
Joomla! Guru
Joomla! Guru
Posts: 800
Joined: Fri Jul 05, 2013 10:35 am
Location: Unknown

Re: Help with tooltip in Joomla 3

Postby SharkyKZ » Thu Sep 07, 2017 12:01 pm

That works for me.

Giorgi_964758
Joomla! Intern
Joomla! Intern
Posts: 67
Joined: Mon Mar 27, 2017 5:05 pm

Re: Help with tooltip in Joomla 3

Postby Giorgi_964758 » Thu Sep 07, 2017 12:09 pm

Works ! Many thanks, friend !

User avatar
leolam
Joomla! Master
Joomla! Master
Posts: 18273
Joined: Mon Aug 29, 2005 10:17 am
Location: Netherlands/ UK/ S'pore/Jakarta/ North America
Contact:

Re: Help with tooltip in Joomla 3

Postby leolam » Thu Sep 07, 2017 5:51 pm

This is not good. Updates will override this solution. You should use an extension (Regularlabs also) https://www.regularlabs.com/extensions/tooltips

Leo 8)
Celebrating 12-Years of Professional Joomla Support Services
- Joomla Professional Support:https://gws-desk.com -
- Joomla Specialized Hosting Solutions:https://gws-host.com -
- Member Joomla Bug Squad & J-CMS Release Team


Return to “Templates for Joomla! 3.x”

Who is online

Users browsing this forum: No registered users and 21 guests