MooTools tooltip

Posted on 2011-05-09
Medium Priority
Last Modified: 2013-11-05

The site I am currently working on is using Joomla PHP and mootools and I need to incorporate a tooltip feature on one of the pages.

The PHP loops through some items and should output a "Read more" link. Upon hover of this link I need to show a  layer with some text inside.

Can anyone point me in the direction of a good script and help me configure it so that it can dynamically work with the links I am looping through and outputting?

Many thanks
Question by:Eternal_Student
  • 6
  • 5
LVL 83

Expert Comment

ID: 35725325
LVL 18

Author Comment

ID: 35726672
Looks good thanks but how would I use it for multiple tooltips on the same page? This is the bit that always gets me.
LVL 83

Expert Comment

ID: 35729117
from the id or an other class on the link you can "build" the ref of the right tooltip to display

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

LVL 18

Author Comment

ID: 35731837
Would you be able to provide an example?
LVL 83

Accepted Solution

leakim971 earned 2000 total points
ID: 35732011
from the tuto :
	<p><a href="javascript:;" class="tipz" title="Awesome, right?::This custom tooltip will help branding immensely!">My Tooltip Link</a></p> 
	<p><a href="javascript:;" class="tipz" title="Another one::Oh yes!">An other link</a></p> 

Open in new window

	<title>MooTools 1.2 Tooltips: Customize Your Tips Example</title>
	<meta name="description" content="Tooltips can also provide another method of website branding. Why throw a vanilla tooltip to the user when you can brand your website? MooTools 1.2 provides a Tips plugin that allows for easy-to-customize tooltips. Let me show you how to create a sweet, branded tooltip.">
	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Serif">
<style type="text/css">

	/*  all media  */
	@media all
		/* global */
		* 							{ margin:0; padding:0; } html { overflow-y:scroll; }
		body						{ font-family:'lucida grande',tahoma,verdana,arial,sans-serif; font-size:62.5%; color:#222; }

		/*	layout */
		.center			{ width:1000px; margin:0 auto; }
			#page			{  }
			#header		{ height:40px; background:url(/wp-content/themes/walshhub/images/header.gif) 0 bottom repeat-x #fcfcfc; position:relative; }
				a#header-logo	{ position:absolute; top:7px; left:0; text-indent:-99999px; width:32px; height:25px; display:block; background:url(/wp-content/themes/walshhub/images/dwavatar.png) 0 0 no-repeat; }
				#header-title 	{ font-weight:normal; font-family:"Droid Serif",Cambria,Georgia,Palatino,"Palatino Linotype",Myriad Pro,Serif; font-size:2em; }
					#header-title a	{ color:#000; text-decoration:none; position:absolute; top:10px; left:40px; }
		#content	{ background:#fff; padding:10px 0 10px 0; }
			#content-left 	{ width:700px; margin:0 20px 0 0; float:left; }
			#content-right 	{ width:280px; float:left; }
				#content-right a	{ float:left; padding-right:10px; display:block; width:125px; height:125px; }

		#footer		{ background:#eee; border-top:1px solid #ccc; padding:10px 0; }
					#footer1, #footer2, #footer3 { width:300px; float:left; margin:0 30px 0 0; }
					#footer3 { width:330px; margin-right:0; }
		/* tags */
		abbr						{ border-bottom:1px dotted #ccc; cursor:help; }
		blockquote					{ background:#eee; margin:0 20px; padding:10px 20px; }
		code						{ font-family:'Consolas', 'Monaco', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; }
		h1							{ font-size:4.3em; margin:0 0 20px 0; }
		h2							{ font-size:2.8em;  }
			h1, h2, h3, h6			{ font-weight:normal; font-family:"Droid Serif",Cambria,Georgia,Palatino,"Palatino Linotype","Myriad Pro",Serif; }
		h3, h6						{ font-size:2em; }
		h6							{ padding:0 0 5px 0; }
		label,select,input[type='submit'],.point { cursor:pointer; }
		li							{  }
		li,p						{ line-height:19px; margin-top:5px; }
		ol, ul						{ padding:0 0 10px 35px; }
		p							{ margin:5px 0 14px 0; font-size:1.2em; line-height:1.8em; }
		textarea,input[type='text'], input[type='email'], input[type='password']	{ border:1px solid #ccc; padding:5px; font-size:120%; font-family:'lucida grande',tahoma,verdana,arial,sans-serif; }
		/* stuff */
		.clear 						{ clear:both; }
		.exhead						{ background:#e8f0f6; border-top:1px solid #fff; color:#000; padding:10px 10px; font-size:120%; }
			.exhead a				{ color:#6D84B4; }
		:*.intro						{ background:#ffd987; font-style:italic; padding:5px 10px; margin-bottom:20px; }*/
		.relative					{ position:relative; }
		/* links */
		a								{ color:#3b5998; }
		a:link, a:visited			{ text-decoration:underline; }
		a:hover, a:active			{ text-decoration:none; }
		a img							{ border:0; }
<script type="text/javascript">
window.onload = function() {
	var paras = document.getElementById('content').getElementsByTagName('p');
	if(paras.length) {
		paras[0].className = paras[0].className + ' intro';
</script>	<style type="text/css">
		.tip				{ width:295px; font-family:tahoma,arial; background:url(http://davidwalsh.name/dw-content/tooltip/tip-text.png) left top repeat-y; }
		.tip-top			{ background:url(http://davidwalsh.name/dw-content/tooltip/tip-top.png) top left no-repeat; height:26px; width:295px; }
		.tip-title		{ color:#e95e25; font-weight:bold; margin:0 30px 0 50px; }
		.tip-text		{ color:#000; padding:10px 30px 20px 50px; }
		.tip-bottom		{ background:url(http://davidwalsh.name/dw-content/tooltip/tip-bottom.png) left bottom no-repeat; width:295px; height:81px; }
	<script type="text/javascript" src="http://davidwalsh.name/dw-content/moo1.2.js"></script>
	<script type="text/javascript">
		//when the dom is ready
		window.addEvent('domready', function() {
			//store titles and text
			$$('a.tipz').each(function(element,index) {
				var content = element.get('title').split('::');
				element.store('tip:title', content[0]);
				element.store('tip:text', content[1]);
			//create the tooltips
			var tipz = new Tips('.tipz',{
				className: 'tipz',
				fixed: true,
				hideDelay: 50,
				showDelay: 50
				'show': function(tip) {
				'hide': function(tip) {
<style type="text/css" id="bsa_css">div.bsap_1236348{width:100%;display:block}div.bsap_1236348 a{width:125px}div.bsap_1236348 a img{padding:0}div.bsap_1236348 a em{font-style:normal}div.bsap_1236348 a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 2px 2px 2px;text-align:center;text-decoration:none;overflow:hidden;}div.bsap_1236348 img{border:0;clear:right;}div.bsap_1236348 a.adhere{color:#666;font-weight:bold;font-size:12px;border:0px solid #ccc;background:#e7e7e7;text-align:center;}div.bsap_1236348 a.adhere:hover{border:0px solid #999;background:#ddd;color:#333;}div.bsap_1236348 a{line-height:100%}div.bsap_1236348 a.adhere{width:125px;height:125px;line-height:1000%}html>body div.bsap_1236348 a.adhere{width:123px;height:123px}div.bsap_1236348 img.s{height:0;width:0}</style>
<div id="content"><div class="center"> 
	<div id="content-left"> 

	<p><a href="javascript:;" class="tipz" title="Awesome, right?::This custom tooltip will help branding immensely!">My Tooltip Link</a></p> 
	<p><a href="javascript:;" class="tipz" title="Another one::Oh yes!">An other link</a></p> 

<div class="tipz" style="position: absolute; left: 483px; top: 311px; visibility: hidden; "><div class="tip-top"></div><div class="tip"></div><div class="tip-bottom"></div></div>

Open in new window

LVL 18

Author Comment

ID: 35732061
Ah ha, I see, so you just use the class "tipz" and it puts the content from the "title" in the actual layer.

Do you know how you would format that content, say add a link or a <h1> ?

LVL 83

Expert Comment

ID: 35732087
line 126 is your tooltip template, the author use css to customize it but you can do your own template as you know
LVL 18

Author Comment

ID: 35732201
I see that, im just wondering, say you want some of the text in the layer to be a hyper link or a <h1> header, for example. Would this work:

<p><a href="javascript:;" class="tipz" title="<a href="">Link in the content</a>">An other link</a></p>

Open in new window

LVL 83

Expert Comment

ID: 35732304
If you take care of the quote logic, no problem, you can put anything in the title

<p><a href="javascript:;" class="tipz" title="<a href='http://http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27027545.html'>Link in the content</a>">An other link</a></p>

Open in new window

LVL 18

Author Comment

ID: 35750797
OK, turns out I have to use this version, how would I use this but with multiple tips?

LVL 83

Expert Comment

ID: 35750947
There's nothing to do... check the html code

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …
Suggested Courses
Course of the Month16 days, 4 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question