[Solved] Take tooltip content from the element attributes

[AndyG]

Hi,

Great work! I am wondering, if there a simple way to get tooltip content from the element attribute, ex "title"?

The problem is that when you have a lot of tooltips on the page, it is easier to put each tooltip content inside its corresponding element and initialize all the tooltips once.

it could be a great feature, unless i am missing something and it could be done with the current version.

Andy

[Craig]

Hi AndyG,

This is indeed possible with the current version of qTip, but it means sacrificing validation if you plan to use non-standard attribute tags. Heres a quick example of how to accomplish this task by using the "tooltip" attribute on your elements:

First, define the elements

JS Code

<div id="test" tooltip="this my my tooltip content">Hover over me</div>
<div id="test2" tooltip="this my my tooltip content, it's similar to the one above">Hover over me too!</div>

Now here's the code to create the tooltips:

JS Code

$('[tooltip]').each(function() // Select all elements with the "tooltip" attribute
{
   $(this).qtip({ content: $(this).attr('tooltip') }); // Retrieve the tooltip attribute value from the current element
});

And there we have it. Tooltips with content based on values of attributes within the HTML element itself.

[AndyG]

Thanks, Craig! It is working fine. One of the problem what I am experiencing is that qtip creates static divs rather than doing it on-fly. Just imagin the dynamic output of some listings, where each would require 4-5 icons with tooltips. No-brainer, 100 listings would generate 100 tooltip constructions (wrapper +2 internal divs). I am trying to optimize it somehow not to overload the page...

[Craig]

You bring up a very good point AndyG. I guess what your suggesting is creating the tooltip on the show event, rather than pre-rendering them on the page? This sounds like a very nice option that could be implemented quite easily. What do you think? Is this what you meant?

[AndyG]

craig Wrote:You bring up a very good point AndyG. I guess what your suggesting is creating the tooltip on the show event, rather than pre-rendering them on the page? This sounds like a very nice option that could be implemented quite easily. What do you think? Is this what you meant?

Yes, this is exactly what i was talking about. It could be a good solution for pages with hundreds of tooltips. I have been using http://www.walterzorn.com/tooltip/tooltip_e.htm all the time, but wanted to utilize jquery since it is the core library for the project.

Here is another point as why tooltips on mouseover would be better. I am generating the content via ajax, so qtips cannot be pre-rendered, but I have to call it explicitly every time after the page generated. Next, I am using jquery pagination, which creates another set of pages from the initial ajax content. So, I have to destroy and recreate qtips for each page. Quite a big headache for just tooltips.

[Craig]

I'm impressed with the suggestion AndyG, and I'll definitely be including this as, at the very least, an option within the next beta.

If you have any other feature suggestions make sure to get posting!

[Craig]

This is now implemented as of beta3.

[DanSwitzer2]

I also posted another alternative on doing this here:

http://craigsworks.com/projects/qtip/for.../143/#p143

It uses the api.beforeShow callback to updating the content. This can also be used to dynamically update the tooltip based up the state of the target (such as a specific class being present.)

[Phish]

This post has helped tremendously. Thanks!

[Brian Enriquez]

Hello!

I'm also new to building pages with dynamic javascript. I have a question regarding stylization. I haven't been able to effectively add styles to the following script:

JS Code

<script type="text/javascript">
   $('[tooltip]').each(function() // Select all elements with the "tooltip" attribute
   {
   $(this).qtip({ content: $(this).attr('tooltip') }); // Retrieve the tooltip attribute value from the current element
   });
</script>

Where do I add the styles in? I've tried a number of different combinations using tutorial code, but something isn't working quite right. Here's the context--when the user is hovering over an image that will then, upon clicking on it, display an .mp4 using the shadowbox.js player, I want the tooltip to display information written by the filmmaker with, also, a title of the film.

Please assist!

You're amazing.

[ChimneyMedia]

Love qTip!

I'm new to it, and I'm having a little trouble implementing the concept in this thread.

My test code:

JS Code

<script type="text/javascript">
   $('.flag').qtip({
      content: {text: $(this).attr('id'),
            title: { 
              text: 'About Me', 
              button: 'Close'
            } },
      show: {solo: true, ready: false, when: 'mouseover'},
      hide: { when: 'blur', fixed: true }
   })
</script>

Does not seem to show the id that is set for the element. It comes through as blank, even though the attribute is:

JS Code

<img src="/images/circle.png" id="test_content_here" class="flag">

Can you help me see what I am missing?

[Craig]

You need to use the each() method if your retrieving attributes etc. from each element within the selector:

JS Code

<script type="text/javascript">
   $('.flag').each(function(){
      $(this).qtip({
         content: {text: $(this).attr('id'),
               title: { 
                 text: 'About Me', 
                 button: 'Close'
               } },
         show: {solo: true, ready: false, when: 'mouseover'},
         hide: { when: 'blur', fixed: true }
      });
   });
</script>

[ChimneyMedia]

Thanks for the quick response! that fixed it

[russhall]

Craig, I just wanted to thank you for this. It's super handy and easily combines with other tooltip styling elements.

For those interested, here's how I'm doing my images inside a dialog box:

For the HTML, I'm using

JS Code

<a href="/products/index.cfm" tooltip="<img src='images/menuhovers/cornice.jpg' />">

And here's my .js

JS Code

$('[tooltip]').each(function() // Select all elements with the "tooltip" attribute
{
   $(this).qtip({ content: $(this).attr('tooltip'),
     position: {
      corner: {
         target: 'topRight',
         tooltip: 'bottomLeft'
      }
   },
        style: { 
        border: {
         width: 1,
         radius: 3,
         color: '#AEC18A'
        },
      padding: 0,
      tip: { // Now an object instead of a string
         corner: 'bottomLeft', // We declare our corner within the object using the corner sub-option
         color: '#AEC18A',
         size: {
            x: 20, // Be careful that the x and y values refer to coordinates on screen, not height or width.
            y : 8 // Depending on which corner your tooltip is at, x and y could mean either height or width!
         }
  },
      width: 106
}
 
                              }); // Retrieve the tooltip attribute value from the current element
});

Not necessarily the prettiest, but it works and is pretty easy to understand/change.

[crazyhor77]

i nealry posted a big question here, but instead ill be posting a solution

i was having some trouble trying to retreive a url address to display in my tooltip instead of just some static content. even though it partially worked (displayed the url address instead) i needed to use an alternative attribute tag as my page was coded in asp and ToolTip is a reserved attribute which was causing the problem.

hope that helps someone else out in the future.

[Jacobi reader]

from where i can have beta 3 ?
and thanks for the informative posts in the thread .

[dbolin]

When I try this code, I get bottom scroll bar instead of the tip.

(13th March 23:05)Craig Wrote:  Hi AndyG,

This is indeed possible with the current version of qTip, but it means sacrificing validation if you plan to use non-standard attribute tags. Heres a quick example of how to accomplish this task by using the "tooltip" attribute on your elements:

First, define the elements

JS Code

<div id="test" tooltip="this my my tooltip content">Hover over me</div>
<div id="test2" tooltip="this my my tooltip content, it's similar to the one above">Hover over me too!</div>

Now here's the code to create the tooltips:

JS Code

$('[tooltip]').each(function() // Select all elements with the "tooltip" attribute
{
   $(this).qtip({ content: $(this).attr('tooltip') }); // Retrieve the tooltip attribute value from the current element
});

And there we have it. Tooltips with content based on values of attributes within the HTML element itself.

[eggpoker]

I just wanna share my experience with qTip on IE.
some times when i use lots of that tips it runs out of sources(it seems so) and page gets so slow.
so I used
[
onHide:function()
{
qtip('destroy')
}
]
to solve the problem and it worked.
wish it's useful