jquery UI 工具提示 / 引导工具提示 /popover 无法使其在没有标题属性的情况下工作

Question

我猜我是哑巴**，但我不能使它工作没有指定标题属性。下面是我的代码:

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

不工作

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

不工作

呈现以下内容:

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

如果我把标题属性放在标记上，一切都可以正常工作。但我想使用内容属性和加载信息与ajax调用。请帮帮我。

我说的不工作是指:

• popup永远不会显示，即使我调用代码$('.js-client-info').tooltip('show')

Answer 1

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

通过指定items选项修复了该问题。

jquery UI工具提示所做的是替换浏览器的默认工具提示。

所以，我认为它不会自动处理没有title属性的项目(这会导致默认的工具提示显示)。

这也在文档中:

项目和内容选项需要保持同步。如果你改变了其中一个，你需要改变另一个。

Answer 2

jQuery UI工具提示默认功能简单如饼:D

基本的jQuery:

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

要添加事件等内容，可以这样做

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

以下是自定义内容:

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" );
    }
 }
   });
 });