Initializing tooltip with JQueryUI

Question

HTML:

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

JS:

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

Result: nothing. No tooltip, no errors; What is wrong here?

Demo: http://jsfiddle.net/w97FA/

These are the resources/plugins I used:

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

Answer 1

Tooltip is placed as a title:

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

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

Otherwise, you have to initialize the element with empty title, in order to set it dynamically:

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

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

Answer 2

As the API documentation for tooltip states, if you use the "content"-option, you also need to use the items-option - so the following code works:

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

However, if you don't need specific logic for the displayed content, or some sophisticated selection, the usage of the title-attribute might be simpler.

Answer 3

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

USE JQUERY TOOLTIP WITH CSS IN ASP.NET WEB APPLICATION.here we can also use css for defining style of tooltip.for full Example [check here][1]

Answer 4

I know that this post is old but I figured that this may help someone with a similar problem. I have been going through some older code that uses tool tips and they were not rendering when you initially hovered over the specified element. I tried a lot of different solutions and could not get it to render properly. I finally found the solution which worked for me which was to simply add a space in the blank title attribute. Once I did that everything work as is was supposed to:

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

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>

<div>
  <input id="inputElementWithOutSpace" class="tooltip" title=""/>
</div>
<div style='padding-top:12px;'>
  <input id="inputElementWithSpace" class="tooltip" title=" "/>
</div>