• Hi, I’m developing a pluging which insert dynamically tooltips into the publisher post.

    I cannot combine links programmatically in the tooltip text.

    I tried unsuccessfully both jQuery tooltip functionality and open span with an tag.

    Please your advice.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Can you post the relevant snippet of the code you tried? Specifically, the HTML you’re outputting and the functions that are responsible for that (i.e., where does the data come from).

    Thread Starter razy.elad

    (@razyelad)

    sure, please see below
    1. a href

    function foo(json) {
        var obj = JSON.parse(json);
    	this.name = obj.name;
    	var content = tinyMCE.activeEditor.getContent();
    	var search_for = obj.name;
    	var split_content = content.split(search_for);
    //---------------- decorate the item's text in the post - add a floating "micro site"------------------------
    	var tmp = split_content[0] + " " + '<a class="tooltip" href="#">'+ search_for   ;
        tmp += '<span class="classic">';
    	tmp += 'Start decorate tooltip';  // this is outputted as nice tooltip
    	tmp += '<a href="https://www.google.com">call google</a>';  // this is concatenated to the post's' text instead of being in the tooltip
    	tmp += '<span>';
    	tmp += '</span>';
    	tmp += '</span>';
    	tmp += '</a>';
    //-----------------  ----------------------	
    
    	for (i = 1; i < split_content.length; i++) {tmp += split_content[i] ;}
    	tinyMCE.activeEditor.setContent(tmp);
    }

    2. jQuery tooltip

    function foo(json) {
        var obj = JSON.parse(json);
    	this.name = obj.name;
    	var content = tinyMCE.activeEditor.getContent();
    	var search_for = obj.name;
    	var split_content = content.split(search_for);
    //---------------- decorate the item's text in the post - add a floating "micro site"------------------------	
    
        var tmp = split_content[0] + " " ;
        tmp += '<label id="search_1" title="initial tooltip">' + search_for + '</label>' ;
        tmp += '<script type="text/javascript">' ;
    	tmp += 'jQuery( document ).ready(function() {' ;
    	tmp += '	 jQuery(function() {' ;
    	tmp += '	    jQuery( "#search_1" ).tooltip({' ;
    	                // this is not outputted although in native php engine it replace the the "initial tooltip"
    	tmp += '		   content: "https://www.google.com"' ;
    	tmp += '		   })});' ;
    	tmp += '});' ;
        tmp += '</script>' ; 
    
    //-----------------  ----------------------	
    
    	for (i = 1; i < split_content.length; i++) {tmp += split_content[i] ;}
    	tinyMCE.activeEditor.setContent(tmp);
    }

    So this is all happening on the back-end in the editor, right? The goal being, that when the post is published, all your HTML is on the page and you can then use jQuery/CSS to show that tooltip when a visitor is hovering over some text/link?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to add links to tooltip (plugin development)?’ is closed to new replies.