You are here: Home / Documentation / How To's / How to add Tooltips to TinyMCE

How to add Tooltips to TinyMCE

by hietpasd published Oct 31, 2013 01:21 PM, last modified Aug 16, 2016 10:50 AM

 

Step 1

Create a javascript file called tinymce_tooltip.js

Paste in:

$(document).ready(function(){
    $('.popup-hover-trigger').hover(
        function(){
            jq(this).next('.popup-content').stop(true,true).fadeIn(500);
        },
        function(){
            jq(this).next('.popup-content').stop(true,true).fadeOut(200);
        }
    );
});

Save.

Add the file to the portal_javascript.  Go to the bottom and add in the id field: tinymce_tooltip.js, click add

 

STEP 2

Go to the portal_skins > custom folder.  Edit ploneCustom.css

Append in:

div#content .popup-content {
    background-color:#E6E6FA;
    box-shadow:0 0 3px #000000;
    display: none;
    margin:-5px 0 0 10px;
    padding:2px 10px;
    position:absolute;
    width:500px;
}
div#content .popup-hover-trigger{ cursor:help; display:inline-block; }

Save.

 

STEP 3

Go to your Site Setup, go to TinyMCE Visual Editor.

Add to the Styles textbox

Tooltip Hover Trigger|p|popup-hover-trigger
Tooltip Content|p|popup-content

Save.

 

Add

When editing content, you hightlight the text you want to trigger the tooltip as "Popup Hover Trigger."  In the line under the trigger, you can add what content you want to appear.  Highlight all the content you want to appear and select "Popup Content"

 

ISSUES

You may have to go to portal_css and portal_javascripts and save both of them to rebuild your caches.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Navigation