tooltip

[Q695]

Does anyone have an image tooltip attached to a mouse that opens on an image, because I'm stumped.

 

I'm thinking something like the top one on: http://jquerytools.org/demos/tooltip/any-html.html

Edited May 8, 2013 by Q695

[denno020]

Whilst that's called a tooltip, it's probably built using divs and some js to hide/show the div on mouse hover on the button.. Would be fairly simple.

Just create a div and style it up how you want it to look (including any images you might want in there). Position it on the page where you want it, and then set it to hidden or display none.

Then use some javascript to show that div when someone hovers over the button/link/whatever you want the tooltip to be attached to.

 

Hopefully that'll get you started.

 

Denno

[Q695]

I'm brand new at CSS, and understand how a onmouseover works.

 

Can you show me an example of how you do it?

[denno020]

After I replied I actually noticed that if you scroll down on that page, they show you some html with exactly how they make it, so you should be able to follow that.

 

The main css property's you're going to use are 'display' or 'visibility'. Do some googling to find out how they work.

Essentially you will create a css class, called hidden (or whatever you want), and apply that to the div by default. Then, when the user hovers over the button, use JavaScript to remove that class. As soon as they mouse off the button, your JavaScript should detect that, and apply your css class back to the div.

 

Alternatively, you could do it using just JavaScript. Give your div an id of tooltip. In your JavaScript, hide that div on page load, and then show it again only on muse over. Jquery has some very simple functions already set up if you want to use those, otherwise it's not too hard to do with raw JavaScript.

 

I'm replying on my phone at the moment so apologies for no code examples. If you still can't figure it out, let me know and I'll give you some specific code that will help.

 

Denno

[Q695]

I forgot to google for a video tutorial, but applying it to an image doesn't seem to be working.

 

I took it from:

Edited May 8, 2013 by Q695

[denno020]

Post your code so we can see what you're attempting this with.

[Q695]

http://jsfiddle.net/Q695/S5J8h/

[denno020]

Well I can imediately see a problem. You're targeting ".tooltip span". That refers to a span inside .tooltip, which is never going to happen, as it's applied to an img. You will need to put a div around both the elements, and apply .tooltip to that div:

 

http://jsfiddle.net/S5J8h/1/

 

Works straight away.

 

Denno

[Q695]

Oh, put the img inside a div tag

[Q695]

How do I make the tool tip float by the mouse location now?

[denno020]

So you want the tooltip to be positioned by the location of the mouse?

 

That will be a bit more involved.. I'm not sure you can do it with just CSS, you'll have to use javascript to constantly update the position of the tooltip div every time the mouse moves, and it's hovered over the button..

[Q695]

I thought I implemented the tooltip code I developed correctly, but I guess not.

the CSS used on my page is as follows:

<style type="text/css">
table, th, td
{
	word-wrap:break-word;
}

<!--tooltip display code-->
.tooltip span
{
	display:none;	
}
.tooltip:hover span
{
	display:inline;
	position:absolute;
	background:white;
	border:1px solid silver;
	color:gray;
	padding:5px;
	border-radius:10px
}
</style>

This code is nested in a layout table:

<div class='tooltip'>
<img style='width: 50px; height: 50px;' alt='ring' src='...'>
<!--tool tip-->
<span>
<table>
...
</table>
</span>
</div>

Why isn't the tooltip hiding when my mouse is off the div tag, and not preventing the table from resizing?

[Q695]

This is just for the beta of my project, not a 2.0 version of the project, I can put that in later I guess.

[Q695]

I need the tooltip to work for the beta, but not the mouse tracking part.  That can come later on.

[denno020]

To be honest.. I don't really understand what you're asking?

[Q695]

Why is the text always visible, but moving from below to the side with a tool tip?

http://jsfiddle.net/Q695/LynB4/

[denno020]

In css, comments start with '/*' and end with '*/'.

 

Try removing your comment with <!-- --> and see what happens .

 

Denno

[Q695]

Why can't you put a HTML comment inside a style CSS tag

[denno020]

I would say that's because it's a HTML comment and not a CSS comment ..

 

Even though your CSS is internal, when your brower sees the <style> tag, it turns into CSS mode, reading everything up until the </style> tag as CSS.

[Q695]

Thanks, I'm a CSS nublet.

[denno020]

No worries at all, we all started somewhere!

 

And also, I've just noticed your signature, very clever! However I'm going to nit-pick on the use of "your"..

 

echo "I will try to help, because your you're still $skill_level , and my skill level is at $my_knowledge";

 

Sorry to be a jerk!

 

Denno

[Q695]

I like it