Question

我想我是愚蠢的 * *但是如果没有指定title属性我就无法工作。这是我的代码：

$('.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'）调用它.toottip（'show'）

Answer 1

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

Answer 2

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

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

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

因此，我认为它不会自动处理没有title属性的项目（导致默认工具提示显示）。

这也在文档中：

项目和内容选项需要保持同步。如果您更改其中一个，则需要更改另一个。

如果没有title属性，jquery ui tooltip / bootstrap tooltip / popover无法使其工作

2 个答案: