初始化工具提示使用jQueryUI的

Question

HTML：

<input type='text' id='uname' />

JS：

$( "#uname" ).tooltip({ content: "gggg" });

结果：没有。没有提示，没有错误;这里有什么问题？

但是：四联zxsw POI

这些都是资源/插件，我使用：

• http://jsfiddle.net/w97FA/
• http://jqueryui.com/tooltip/

Answer 1

工具提示被作为一个标题：

http://api.jqueryui.com/tooltip/#option-content

<input type='text' id='uname' title="gggg" />

否则，您必须初始化与空标题的元素，以动态地设置：

http://jsfiddle.net/samliew/w97FA/2/

<input type='text' id='uname' title='' />

Answer 2

由于http://jsfiddle.net/samliew/w97FA/8/的提示状态，如果使用“内容” - 选项，你还需要使用的物品选项 - 所以下面的代码工作：

API documentation

不过，如果你并不需要特定的逻辑显示的内容，或一些复杂的选择，标题属性的使用可能比较简单。

Answer 3

$('#uname').tooltip({ content: "Awesome title!", "items":"input" })

使用jQuery TOOLTIP用CSS在ASP.NET WEB APPLICATION.here我们还可以使用CSS定义tooltip.for完整的例子[点击这里]的方式[1]

Answer 4

我知道，这个职位是旧的，但我想，这可能帮助别人类似的问题。我一直在经历一个使用工具提示一些旧的代码，当你一开始悬停在指定的元素，他们没有渲染。我尝试了很多不同的解决方案，并不能让它正确地呈现。我终于找到了这工作对我来说这是简单地在空白标题属性添加空间解决方案。一旦我做到了一切工作按原样是应该：

  <script src="js/tooltips.js"></script>
   <script>
       $(function () {
           $("#page-wrap a[title]").tooltips();
       });
   </script>     

//get all elements with classname tooltip
var toolTipElements = document.getElementsByClassName('tooltip');

//initialize tool tips using classname
if(toolTipElements){
  [].forEach.call(toolTipElements, function(element){  
    $(element).tooltip({
      items: 'input',
      show: false,
      hide: false,
      track: true,
    });
    
    //add mouseover event listener to element that is supposed to display tool tip
    element.addEventListener('mouseover', function(){
      renderToolTip(element, true);    
    });
  });  
}

//render tool tip with message
function renderToolTip(element, withTracking){
  $(element).tooltip({
        items: 'input',
        show: false,
        hide: false,
        track: withTracking,
        content: function(callback){
          var toolTipMessage = 'Hello From ' + element.id +' Tool Tip!';          
          callback(toolTipMessage);
        }
    });
}