Search code examples
javascriptjqueryjquery-pluginsbeautytips

Jquery extension BeautyTips doesn't work with dynamic ajaxPath option

I'm using the BeautyTips jQuery extension, but I'm not having any luck passing dynamic URLs as the ajaxPath. In the documentation, they suggest:

$('#example18').bt({
  ajaxPath: ["$(this).attr('href')", 'div#content']
});

I have 

$( '.username' ).bt({ 
    ajaxPath: ["$(this).attr('title')"]
});

However, when I hover over the username element, instead of bringing up the URL stored in the title attribute within the Beautytip, it attempts to send the whole browser to another page (or refresh; it's hard to tell because the browser address doesn't change, but the page goes blank, and a View Source shows an entirely different page.)

I have verified that the title in the element in question is correct and is being addressed correctly. If I statically pass the path, it works, but I'd rather not write a new version of this function for every item on the page that needs a Beautytip.

Is there a syntax issue here? Any help would be much appreciated.

My HTML is like:

<span class="username" title="http://degree3.com/popup/baloon/member-summary?id=53">Username</span>
Solution

  • Okay, I had to dig through the extension, but I figured this one out.

    The plugin author (for reasons I did not spend the time to decipher) kills the "title" attribute of the element that BeautyTips operates on and moves its value to an attribute called "bt-xtitle" instead. I guess this is why his sample used the "href" attribute instead of the title attribute, and it was my dumb luck to attempt this maneuver on the wrong attribute.

    Anyway, this works:

    $( '.username' ).bt({ 
    ajaxPath: ["$(this).attr('bt-xtitle')"]
});