I am using jquery-ui tooltip and tinimce 4,

the problem is when tinymce is loaded in a textarea there is the title attribute "Rich Text AreaPress ALT-F10 for toolbar..." that display a jqueryui tooltip all the time.

I have tried to remove the title with js, but nothing changed:

document.getelementbyid('message_ifr').RemoveAttribute('title');

Is there a way to remove the title from tinymce or the jqueryui tooltip on the textarea?

EDIT:

this is tinymce code:

tinymce.init({

mode : "exact",

elements : "message,notes",

plugins: "advlist autolink lists link image charmap hr anchor pagebreak code fullscreen table ",

toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image table code fullscreen",

menubar: false,

statusbar: false,

});

and jquery-ui tooltip code:

$(function() { 
    $( document ).tooltip({ 
    content: function() { return $(this).attr('title'); } // br
    }); 
});

I am using jquery-ui tooltip and tinimce 4,

the problem is when tinymce is loaded in a textarea there is the title attribute "Rich Text AreaPress ALT-F10 for toolbar..." that display a jqueryui tooltip all the time.

I have tried to remove the title with js, but nothing changed:

document.getelementbyid('message_ifr').RemoveAttribute('title');

Is there a way to remove the title from tinymce or the jqueryui tooltip on the textarea?

EDIT:

this is tinymce code:

tinymce.init({

mode : "exact",

elements : "message,notes",

plugins: "advlist autolink lists link image charmap hr anchor pagebreak code fullscreen table ",

toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image table code fullscreen",

menubar: false,

statusbar: false,

});

and jquery-ui tooltip code:

$(function() { 
    $( document ).tooltip({ 
    content: function() { return $(this).attr('title'); } // br
    }); 
});

• javascript
• jquery-ui
• tinymce

• Have you considered that you don't have remove title attribute from tinymce because it may be better to adjust tooltip selector to not include unneeded elements? Please paste your jQuery UI tooltip related code. – Māris Kiseļovs Commented Aug 18, 2013 at 9:04
• Check this link. – raina77ow Commented Aug 18, 2013 at 9:05
• Maris: yes but i don't know how.. – ipel Commented Aug 18, 2013 at 9:14
• Raina: already see that, but where i have to add this code? – ipel Commented Aug 18, 2013 at 9:15
• Right after the init call, for example. Check this fiddle to see this approach in action. – raina77ow Commented Aug 18, 2013 at 10:39

7 Answers 7

I have just figured out the correct solution for my problem:

(thx to: raina77ow for this fiddle )

STEP 1:

after the tinymce integration code add this:

tinymce.init({
// ...
});

var ed = tinymce.activeEditor;
var ifr = tinymce.DOM.get(ed.id + '_ifr');
ed.dom.setAttrib(ifr, 'title', '');

STEP 2

change the jquery-ui tooltip function from document to '[title]', like this:

$(function() { $( '[title]' ).tooltip({ content: function() { return $(this).attr('title'); } }); });

tinymce.init({
    setup: function( editor ){
        editor.on('init', function( e ){
            $('#' + e.target.id + '_ifr').removeAttr('title');
        });
    }
});

Used jQuery !

This is how you remove title using js,

document.getElementById('message_ifr').removeAttribute('title');

Have you tried,

 $(document).tooltip({
      content: function () {
          return $(this).prop('title');
      }
  });

If you want to remove the tooltip you just check the JQueryUI function and add a line at the top:

$('#cphMain_txtEditor').tooltip('disable');

as a example function:

      $(function () {
      $('#HeaderTextBox').tooltip('disable');
      $('#cphMain_txtEditor').tooltip('disable');
      $(document).tooltip({
          position: {
              my: "center bottom-20",
              at: "center top",
              using: function (position, feedback) {
                  $(this).css(position);
                  $("<div>")
                    .addClass("arrow")
                    .addClass(feedback.vertical)
                    .addClass(feedback.horizontal)
                    .appendTo(this);
              }
          }
      });
  });

here I have removed tooltips from two places, one regular textbox (HeaderTextBox) and a TinyMCE editor (#txtEditor) but since I have a masterpage with a contentcontroller I need to add that on too (cphMain) that's why the ID is cphMain_txtEditor.

What I did wasn't very clean but it did the job. I opened the main tinymce.min.js, looked for "Rich" found that bit between 2 commas ( .. , title = blabla Rich blabla , ... ) and removed it.

Did the job perfectly, and it doesn't remove any functionnality whatsoever.

The problem I had was a tooltip saying:

Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help

when mousing over a TinyMCE instance.

Rather annoying.

To disable I just searched tinymce.min.js for "Rich Text Area" and deleted it.

Simply do this

$('.mce-edit-area iframe').attr("title","");