HTML Feature (something)

What do you call that whereas when you have a anchor a little yellow pop up with a name ? If anyone has an example so that I can relate to what I’m exactly looking for, and can you change the text size of the words ?

What you have written is almost incomprehensible. Do you mean tooltips?

Sounds like the title attribute e.g.

<a href=“http://www.sitepoint.com/forumstitle=“SitePoint Forums”>Link text</a>

There’s nothing in the HTML or CSS spec to style the title attribute, but you could use javascript. jQuery Cluetip for example.

That is exactly what I’m referring too Victor, I want to apply it to just an anchor :slight_smile:

Well, the Cluetip documentation is quite thorough and if you have problems, I believe the developer participates in the jQuery forum.

[highlight=“HTML 4.01 Strict”]<a href=“http://www.foo.com” title=“Foo”>Link to Foo</a>



Your basic tooltip. If you do a Google search on formatting tooltips with CSS, JavaScript, or whatever you prefer, you will find numerous ways of styling and presenting tooltips. ClueTip is one nice way to do it, though there are simpler methods out there.

The documentation is clear, although I’m trying to do something simple it states
for the jQuery

$(‘a.title’).cluetip({splitTitle: ‘|’});

I put that in the <head> then the documentation states

<a class=“title” href=“#” title=“This is the title|The first set of contents comes after the first delimiter in the title.|In this case, the delimiter is a pipe”>

Alright so I’ve got an anchor in a <div>with a <ul id> with a .class then a so I put in the code as such:

<script type=“text/javascript”>$(#masterhome #nav .home a.home’).cluetip({splitTitle: ‘|’}); </script>

That doesn’t work, and yes I have jQuery already in the page pointing to it’s correct path.

To be honest, it’s not very clear to me. How about putting an example online and posting in the javascript section? There may be more jQuery/Cluetip experts on hand there.

I’m having some problems getting jQuery ClueTip to work, the documentation is clear but I’m still a bit confused. The documentation states to put this code in the <HEAD> which I’ve done.

[QUOTE]$(‘a.title’).cluetip({splitTitle: ‘|’});

<a class=“title” href=“#” title=“This is the title|The first set of contents comes after the first delimiter in the title.|In this case, the delimiter is a pipe”>

Alright so I’ve got an anchor in a <div>with a <ul id> with a .class then a so I put in the code as such in the <HEAD>

<script type=“text/javascript”>$(#masterhome #nav .home a.home’).cluetip({splitTitle: ‘|’}); </script>

I have the path for jQuery within my page but it’s not working?

It could also be related to where SH has put that <script>, and whether it’s at the bottom of the body or not (since there is no $(function() { …}) or $(document).ready(…) wrapper.

I’ve posted a message in the JavaScript forum.

Please put an example online.

You need this in the <head> section:

<script type="text/javascript" src="jquery.js"></script>
<script src="cluetip/jquery.cluetip.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('a.title').cluetip({splitTitle: '|'});      
});
</script>

Then you need to add a class of ‘title’ to any links you want this to appear on:

<a class="title" href="#" title="This is the heading|This is the body content of the pop up">Link</a>

You will need to adjust the paths to the javascript files to match your setup. Alternately you can move this to an external file called whatever.js and then link to it from the <head> section as well. :slight_smile:

$(document).ready(function() {
	$('a.title').cluetip({splitTitle: '|'});      
});

Hope it helps. :slight_smile:

I got it working :slight_smile:

Now it’s just changing the background color for the text do you have to link to the CSS file?

Threads merged - please don’t start two threads on the same topic. Just ask an advisor to move the thread to the correct forum :slight_smile:

Oh good, this makes it more easier :slight_smile:

Now it’s just changing the background color for the text do you have to link to the CSS file?
Just change the actual CSS file you’re including for this feature. That is, unless you want it to change upon a certain event.

Yes you will need some CSS to make it pretty. :slight_smile: The .css file came with the .zip download. It has all the .css for every possibility (feature it offers).

It’s how to blend the CSS with the specific anchor.

Tell me if I’m in the right direction

#<div> .title {
background: #FFFFFF
}