1

I guess I am dumb as ** but I can't make it work without specifing the title attribute. Here is my code:

$('.js-client-info').popover({html : true, title: "ZOMG", content:"asdasdasdasdasdasd"});

Not working

$('.js-client-info').tooltip({html : true, title: "ZOMG", content:"asdasdasdasdasdasd"});

Not working

Rendering the following:

<a class="js-client-info" data-original-title="" title="">gg</a>

If I go and place the title attribute on the markup everything works ok. But i want to use the content property and load information with ajax calls. Help me please.

By not working I mean:

  • popup never shows even if i call it with code $('.js-client-info').tooltip('show')
4

2 回答 2

1

jQuery UI tooltip default functionality is simple as cake :D

Basic jQuery:

$(function() {
 $('.js-client-info').tooltip();
});

For additions to the events and so forth you would do this

 $(function() {
   $('.js-client-info').tooltip({
     show: {
    effect: "slideDown",
    delay: 250
  },
    hide: {
     effect: "slideUp",
   }
     });
 });

Here is for custom content:

http://jsbin.com/uwuwuk/1/edit

$(function() {
   $('.tip').tooltip({
     show: {
    effect: "slideDown",
    delay: 250
  },
    hide: {
     effect: "slideUp"
   },
     items: "[title], [data-html]",//call the attr inside square brackets
     content: function() {
     var element = $( this );
       var call = $(this).attr('data-html'); //var call is same as items though we need to do this
      var randHTML = {a:'<div class="red"></div>',b:'<div class="blue"></div>'};//array of html (technically objects)
    if ( element.is("[data-html]") ) {
      return randHTML[call]; //if element is data-html return the randHTML with which attr it has (a, b, c, d)
    }
    if ( element.is("[title]") ) { //if just title return title
      return element.attr( "title" );
    }
 }
   });
 });
于 2013-05-22T18:35:25.390 回答
1

http://jsfiddle.net/nzgdv/2/

The issue was fixed by specifying the items option.

What the jquery UI tooltip does is replace the browser's default tooltip.

So, I would assume it doesn't automatically work with items that don't have title properties (which causes the default tooltip to show).

This is also in the documentation:

The items and content options need to stay in-sync. If you change one of them, you need to change the other.

于 2013-05-22T18:57:41.993 回答