Hide default title attribute when using tooltip

[FluXs]

Hi guys.

I've been looking around the forums / demo sections for a clue on this but I cannot find an answer to my issue.

I am using the tooltip attribute for my qtips as the default title attribute is being used for another purpose (linking to a container for a jQuery Tab AJAX)

As you might guess when I hover over the links I get the default title attribute being displayed e.g '#container-tab' and as well as my qtip showing my tooltip e.g "View Parts/Services"

Is there something I can do in qtip to hide the title attribute from the hyperlink appearing?

thanks

[Update]


I have come up with a short term solution which is to delay showing the title text:

JS Code

$('a[href][title]').qtip({
 show: { delay: 9000 }
});

This works as the tooltip is shown but the 'title tips' can now be delayed to a point where they would not appear. But I don't like it :/

[dustmoo]

It looks like your syntax is slightly off: Have you tried the code outlined in the documentation?

JS Code

$('a[title]').qtip({ style: { name: 'cream', tip: true } })

Craig omits the [href] part that you have in your code.

[FluXs]

Hi dustmoo, thanks for replying.

I think ill post the full code instead first:

JS Code

//Show the tip using the tooltip attribute
$('a[tooltip]').each(function() {
 $(this).qtip({
  content: $(this).attr('tooltip'), // Use the tooltip attribute of the element for the content
 });
});
 
// Hide the default title attribute appearing
$('a[title]').qtip({
 show: { delay: 9000 }
});

I tried without the [href] (as above) but its still the same; without the second qtip (hack) to hide the title attribute I get it appearing when i mouse over. I know I shouldn't be using a title and a tooltip on the hyperlink but I am stuck with using the title as the jQueryUI is using it for something else.

I'm just looking for the best way to hide the title tips appearing... if possible

[dustmoo]

Ahh, I see. Well that is complicated, because unless you use the title attribute for your tooltip content, it is going to show both. Using the delay is a good hack (I wouldn't mouse over an object for 9 seconds) But the only other way I know of would be not to use the title attribute.

What is jQueryUI using the title attribute for that you can't not use it or use it for your tooltip?

Can you configure or even hack jQueryUI to use a different attribute?

Cheers!

[FluXs]

Hi dustmoo,

I am using the jQuery UI Tabs with AJAX content.

In the documentation it says you can use a single container for the ajax content give it an ID. Then to make sure each tab/link uses the container as its target location you put the title attribute as the containers ID:
e.g

JS Code

<li><a href="xyz.php" title="vtab-content" tooltip="View Parts">Parts</a></li>
<li><a href="abc.php" title="vtab-content" tooltip="View Services">Services</a></li>
 
<div id="vtab-content"></div>

Of course when you mouse over the links you get a "vtab-content" tooltip. So I am using qtip now to hide that and show a better tooltip instead.

I think for now its sorted, I might revisit the jQuery UI tabs later to find a better way to link to a common target container so I don't need to use the title attribute and mess up qTip.

Thanks for you help.

[dustmoo]

I see.. you've gotta love these edge cases.

You might want to try the following:

JS Code

<div id="tabs">
   <ul>
      <li><a href="abc.php" tooltip="Blah">Ajax Tab 1</a></li>
      <li><a href="xyz.php" tooltip="Blah">Ajax Tab 2</a></li>
   </ul>
   <div id="tabs-1">
   </div>
</div>

I believe jQueryUI only needs the title attribute if you want to keep your URLs human readable in the tabs. At least the ajax example on the page isn't using the title attribute.

Anyway.. other than that.. your hack is the only other way I can think of.

[dustmoo]

One thing you might want to try:

JS Code

$('a[title]').qtip({
 show: false
});

false can be used with the hide parameter so you can define with the api.. it may work with the show attribute as well.

Just saw this in one of the examples.

Dustin

[FluXs]

dustmoo Wrote:One thing you might want to try:

JS Code

$('a[title]').qtip({
 show: false
});

false can be used with the hide parameter so you can define with the api.. it may work with the show attribute as well.

Just saw this in one of the examples.

Dustin

oooh! that worked. I'm gonna use that method instead for qTip

I did try without using the ID tag, but the formatting had issues it might work if i spend some more time later

[dustmoo]

Glad to help... good luck!

[josephtate]

FluXs Wrote:

dustmoo Wrote:One thing you might want to try:

JS Code

$('a[title]').qtip({
 show: false
});

false can be used with the hide parameter so you can define with the api.. it may work with the show attribute as well. :)

Just saw this in one of the examples.

Dustin

This has been a super helpful discussion. I'm running into a similar, but different problem: are there ways to hide the standard title attribute on hover when using "show: click"? I'm thinking of adding the "tooltip" attribute to solve the problem but wondered if there was a "valid" (as in W3C valid) way to pull it off.


oooh! that worked. I'm gonna use that method instead for qTip :)

I did try without using the ID tag, but the formatting had issues it might work if i spend some more time later

[dustmoo]

Joseph,

Just to clarify as to the type of behavior you are describing; you want the show to hide both when someone moves the mouse over the target AND when you click on the target? Or are you talking about hiding with the same behavior?

[josephtate]

dustmoo Wrote:Joseph,

Just to clarify as to the type of behavior you are describing; you want the show to hide both when someone moves the mouse over the target AND when you click on the target? Or are you talking about hiding with the same behavior?

Thanks for the response. I need click to show content from the title attribute and I'd like to disable the title tag's default behavior (show attribute's content on hover). When a user goes to click for the toolip, the element's title tag still works as usual with "show" set to "click."

[dustmoo]

josephtate Wrote:

dustmoo Wrote:Joseph,

Just to clarify as to the type of behavior you are describing; you want the show to hide both when someone moves the mouse over the target AND when you click on the target? Or are you talking about hiding with the same behavior?

Thanks for the response. I need click to show content from the title attribute and I'd like to disable the title tag's default behavior (show attribute's content on hover). When a user goes to click for the toolip, the element's title tag still works as usual with "show" set to "click."

I think I understand. But it would be easier if you could post a snippet of code for me to look at. That way I can troubleshoot the code and see what is going on. Are you saying that the regular link title element is still showing? Are you trying to replace the title element with qtip? Code, my friend. Code.

Anyway, I am sure we can help!

Dustin

[josephtate]

dustmoo Wrote:I think I understand. But it would be easier if you could post a snippet of code for me to look at. That way I can troubleshoot the code and see what is going on. Are you saying that the regular link title element is still showing? Are you trying to replace the title element with qtip? Code, my friend. Code.

Yes, the regular title element is still showing. It's a title attribute applied to a span element. I'd like qtip to grab the content of the title element and suppress the browser's usual tooltip behavior for the title attribute. In other words, have qtip replace the default title attribute's hover style.

Here's the qtip code I'm using.

JS Code

$( 'span.help[title]' ).qtip({ 
        content: {
            text: false
        },
        show: 'click',
        hide: 'unfocus',
        position: {
            corner: {
                target: 'bottomMiddle',
                tooltip: 'topLeft'
            }
        },
        style: { 
            name: 'dark', 
            tip: true 
        },
        width: {
            max: 250
        }
    });

Here's an html snippet:

JS Code

<th>
 <span class="help" title="foo">Serial Number*</span>
</th>

[dustmoo]

Thanks joseph,

Went through your code, and I can see your problem. I believe that the only way to over-ride the tooltip is to have qtip activate on the mouseover event. Thereby clearing out the mouseover event that the browser is using to display the title content.

Therefore, if you want to be able to click to activate the tooltip, you'll need to add your own attribute.

At least, from what I can tell.

Thanks!

[Craig]

josephtate, you could also try simply removing the attribute once it's done using the onRender callback:

JS Code

$('span.help[title]').qtip({
   api: {
      onRender: function(){ 
         this.elements.target.removeAttr('title')
      }
   }
});

[josephtate]

craig Wrote:

JS Code

$('span.help[title]').qtip({
   api: {
      onRender: function(){ 
         this.elements.target.removeAttr('title')
      }
   }
});

I tried the above and get this error in Safari:

JS Code

TypeError: Result of expression 'f(this).data("qtip")' [undefined] is not an object. jquery.qtip-1.0.0-rc3.min.js:15

Firebug's error is a little more verbose and it also references line 15:

JS Code

f(this).data("qtip") is undefined
[Break on this error] (function(f){f.fn.qtip=function(B,u){var...asses:{tooltip:"qtip-blue"}}}})(jQuery);

[Craig]

josephate, does this occur only when adding the above code? That error doesn't seem connected...

[josephtate]

Yep, that error only occurs when adding the above code.

[Craig]

That's really odd... not to mention the fact the title attribute is removed onRender anyway. I'd need to see your actual implementation to figure out whats going on here.