Style by element class, content by element id

[teeks]

Hey, I just wanted to post the method I used to set default styles for a group of tips using their class, but set content individually using their ids.

I had a look around the forums for a better method but couldn't find exactly what I was looking for. If someone knows a better way, please advise.

I was basically not happy with having to repeat the settings for style and behavior for each element to also set their content. I wanted just one declaration for that stuff so I could change it easily and leave the content as separate.

In the doc head, I use an associative array containing element IDs and their content, then a for each loop selecting elements by class (.qtip) and applying generic styles and the specific content where the id matches:

JS Code

var contents = new Array();
  contents['tip-first'] = { url: 'link1.html' };
  contents['tip-second'] = {url: 'link2.html'};
  contents['tip-other'] = '<p>Some HTML text content</p>';
 
$(".qtip").each( function(i) {
   $(this).qtip({
   position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle' } },
   style: { name: 'cream', tip: true, width: { max: 480 } },
   hide: { when: 'mouseout', fixed: true },
   content: contents[$(this).attr('id')] // Use the current element id value to grab the content for this particular tooltip 
   });
});

My tooltip elements look like this:

JS Code

<a class="qtip" id="tip-first" href="#" o<strong></strong>nclick="return(false)">The first one</a>
<a class="qtip" id="tip-second" href="#" o<strong></strong>nclick="return(false)">The second one</a>
<a class="qtip" id="tip-other" href="#" o<strong></strong>nclick="return(false)">Another one</a>

Hope it helps.

[teeks]

Just noticed an error - don't know why it put strong tags after the o in onclick? I can't get it to show the code without them though.

(20th December 13:55)teeks Wrote:  

JS Code

<a class="qtip" id="tip-first" href="#" o<strong></strong>nclick="return(false)">The first one</a>
<a class="qtip" id="tip-second" href="#" o<strong></strong>nclick="return(false)">The second one</a>
<a class="qtip" id="tip-other" href="#" o<strong></strong>nclick="return(false)">Another one</a>

Each link should be

JS Code

<a class="qtip" id="tip-id" href="#">Tip Link</a>

The onclick was just to stop it from appending the # to the URL for testing with internal links.

[speshulk926]

You are THE MAN! Your example was *exactly* what I was wanting to do. I really appreciate it, because I was getting frustrated on how to achieve this!! YAY!

[teeks]

(24th February 22:04)speshulk926 Wrote:  You are THE MAN! Your example was *exactly* what I was wanting to do. I really appreciate it, because I was getting frustrated on how to achieve this!! YAY!

Cheers. I feel warm and fuzzy now. This is the first time I've contributed back to anything, usually I'm under too much pressure to move on to the next job. I'll try and continue this way though, its more rewarding.

[james121]

The class attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances. The class attribute has several roles in HTML:
As a style sheet selector (when an author wishes to assign style information to a set of elements).
For general purpose processing by user agents.

[teeks]

(26th February 06:39)james121 Wrote:  The class attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances. The class attribute has several roles in HTML:
As a style sheet selector (when an author wishes to assign style information to a set of elements).
For general purpose processing by user agents.

I thought this post was weird, it has nothing to do with the thread and smells like something a bot would say, so I googled it and its copied exactly from http://www.w3.org documentation. Report spam?

[Craig]

(27th February 03:44)teeks Wrote:  I thought this post was weird, it has nothing to do with the thread and smells like something a bot would say, so I googled it and its copied exactly from http://www.w3.org documentation. Report spam?

Thanks teeks for the heads up, does seem very bot-like. I've warned him and sent a PM.

[insideout]

It did n,t work for me:
here is what I did:

JS Code

<head>
<script type="text/javascript" src="js/qtip/jquery-1.3.2.min.js"></script>
 <script type="text/javascript" src="js/qtip/jquery.qtip-1.0.0-rc3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() 
var contents = new Array();
  contents['tip-first'] = { url: 'link1.html' };
  contents['tip-second'] = {url: 'link2.html'};
  contents['tip-other'] = '<p>Some HTML text content</p>';
 
$(".qtip").each( function(i) {
   $(this).qtip({
   position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle' } },
   style: { name: 'cream', tip: true, width: { max: 480 } },
   hide: { when: 'mouseout', fixed: true },
   content: contents[$(this).attr('id')] // Use the current element id value to grab the content for this particular tooltip 
   });
});
</script>
</head>

the tool tips :

JS Code

<a class="qtip" id="tip-first" href="#">The first one</a>
<a class="qtip" id="tip-second" href="#">The second one</a>
<a class="qtip" id="tip-other" href="#">Another one</a>

thanks for your help[/quote][/php]

[teeks]

(15th March 22:49)insideout Wrote:  It did n,t work for me...

Your code looks right. Its hard to tell with just a snippet though. Can you post a URL where you are getting errors and describe what's going wrong in more detail?

[junkiexl09]

The below code does not work at all... can someone tell me how to get it working?

(15th March 22:49)insideout Wrote:  It did n,t work for me:
here is what I did:

JS Code

<head>
<script type="text/javascript" src="js/qtip/jquery-1.3.2.min.js"></script>
 <script type="text/javascript" src="js/qtip/jquery.qtip-1.0.0-rc3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() 
var contents = new Array();
  contents['tip-first'] = { url: 'link1.html' };
  contents['tip-second'] = {url: 'link2.html'};
  contents['tip-other'] = '<p>Some HTML text content</p>';
 
$(".qtip").each( function(i) {
   $(this).qtip({
   position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle' } },
   style: { name: 'cream', tip: true, width: { max: 480 } },
   hide: { when: 'mouseout', fixed: true },
   content: contents[$(this).attr('id')] // Use the current element id value to grab the content for this particular tooltip 
   });
});
</script>
</head>

the tool tips :

JS Code

<a class="qtip" id="tip-first" href="#">The first one</a>
<a class="qtip" id="tip-second" href="#">The second one</a>
<a class="qtip" id="tip-other" href="#">Another one</a>

thanks for your help

[/php]
[/quote]

[teeks]

(24th March 09:06)junkiexl09 Wrote:  The below code does not work at all... can someone tell me how to get it working?

(15th March 22:49)insideout Wrote:  It did n,t work for me:
here is what I did:

JS Code

<head>
<script type="text/javascript" src="js/qtip/jquery-1.3.2.min.js"></script>
 <script type="text/javascript" src="js/qtip/jquery.qtip-1.0.0-rc3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() 
var contents = new Array();
  contents['tip-first'] = { url: 'link1.html' };
  contents['tip-second'] = {url: 'link2.html'};
  contents['tip-other'] = '<p>Some HTML text content</p>';
 
$(".qtip").each( function(i) {
   $(this).qtip({
   position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle' } },
   style: { name: 'cream', tip: true, width: { max: 480 } },
   hide: { when: 'mouseout', fixed: true },
   content: contents[$(this).attr('id')] // Use the current element id value to grab the content for this particular tooltip 
   });
});
</script>
</head>

the tool tips :

JS Code

<a class="qtip" id="tip-first" href="#">The first one</a>
<a class="qtip" id="tip-second" href="#">The second one</a>
<a class="qtip" id="tip-other" href="#">Another one</a>

thanks for your help

[/php]

[/quote]

Well seeing as you quoted the code that insideout already said didn't work, that's not surprising.
You need to post what kind of error you're having or your exact code or a URL where people can see what's happening otherwise its a little hard to debug based on: it doesn't work.

[alfonsomr]

Hello this method works for me perfectly with:

JS Code

contents['selector'] = { url: 'link.php?id=' + id };

My issue now is that the qtip opens with the correct data but like a flying box randomly from any position in direction to the supposed postion. If I just replace the dynamic data for static string this doen't happens. Any suggestion or issue for position / dynamic data using this type of method?

[teeks]

(Yesterday 05:30)alfonsomr Wrote:  Hello this method works for me perfectly with:

JS Code

contents['selector'] = { url: 'link.php?id=' + id };

My issue now is that the qtip opens with the correct data but like a flying box randomly from any position in direction to the supposed postion. If I just replace the dynamic data for static string this doen't happens. Any suggestion or issue for position / dynamic data using this type of method?

I had the same problem using google maps in a tip, probably just because it has to figure out redering position and size on the fly. Maybe having default static content, then replacing it dynamically as required, would at least give it something to render?? Static content could be "loading..." or something, because people won't see it anyway right?

[alfonsomr]

Thank you Teeks for the suggestion. I did that, the static text ("Loading...") appear correctly but when it is replaced by the dynamic data, the position of the tip is affected because the dynamic text is longer... the height of the box increased.

[garbledygook]

(26th February 06:39)james121 Wrote:  The class attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances. The class attribute has several roles in HTML:
As a style sheet selector (when an author wishes to assign style information to a set of elements).
For general purpose processing by user agents.

I've also used solutions that simply use the each() function, and then just do a switch on the attr('id') for the current element matching my each loop. This comes in handy if you are using a lot of variable text qualifiers on your elements for descriptive purposes. Then based on that you can change default values for variables, then simply call a function like AddQtip passing in the appropriate changes and be done with it. If you wanted, I'm guessing you could make some kind of struct to use, etc.