Navigation
Archive / Tooltip/Popover – enable html fin Cornerstone Plugin (code.js)?
This is archived content. Visit our new forum.
  • Author
    Posts
  • October 5, 2015 at 8:02 pm #612271

    Alexandra
    Participant

    Hi, I searched all over the forums and couldn’t find an answer.

    1. Is it possible to enable html for popovers & tooltips?

    2. Please let me know if this is correct: the function is currently set to false in Cornerstone’s cs.body js file located at public_html/wp-content/plugins/cornerstone/assets/js/dist/site – is this what dictates whether or not html is allowed inside of tooltips & popovers?

    I see the attribute for html is set to false value in 4 spots:

    // =============================================================================

xData.api.map('extra', function( params ) {

  if ( params.type === 'tooltip' ) {

    var optionsTooltip = {
      animation : true,
      html      : false,
      placement : params.placement,
      trigger   : params.trigger,
      delay     : {
        show : 0,
        hide : 0
      }
    };

    if ( params.title && params.title !== '' ) {
      optionsTooltip.title = params.title;
    } else if ( params.content && params.content !== '' ) {
      optionsTooltip.title = params.content;
    }

    $(this).tooltip(optionsTooltip);

  }

  if ( params.type === 'popover' ) {

    var optionsPopover = {
      animation : true,
      html      : false,
      placement : params.placement,
      trigger   : params.trigger,
      content   : params.content,
      delay     : {
        show : 0,
        hide : 0
      }
    };

    if ( params.title && params.title !== '' ) {
      optionsPopover.title = params.title;
    }

    $(this).popover(optionsPopover);
  }

});

// Legacy
// =============================================================================

jQuery(document).ready(function($) {

  $('[data-toggle="tooltip"]').tooltip({
    animation : true,
    html      : false,
    delay     : {
      show : 0,
      hide : 0
    }
  });

  $('[data-toggle="popover"]').popover({
    animation : true,
    html      : false,
    delay     : {
      show : 0,
      hide : 0
    }
  });

});
// =============================================================================

    3. If I change html value to ‘true’ would this allow html to render as styling, rather than actual code (as it currently does)?

    4. Would implementing this change via the code.js file in wp-content/plugins/cornerstone/assets/js/dist/site, however, be overridden & nullified anytime the theme is updated though (since it’s not implemented via child)?

    I have a child theme set up, but I’m not sure how to override this function correctly. Please help! 🙁
    And thank you again, so, so much for your time, in advance.

    October 5, 2015 at 10:48 pm #612427

    Friech
    Moderator

    Hi There,

    Thanks for writing in! Unfortunately, the Tooltip & Popover feature of X is not design to contain an HTML. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

    Thanks for understanding. Take care!

    October 6, 2015 at 9:15 am #613162

    Alexandra
    Participant

    Hi, thanks for the quick response. 🙂

    Could you please let me know if it is the cs-body.js file that controls the ability to insert HTML as styling? or if there are other or additional files that control this functionality?

    Thank you so much!

    October 6, 2015 at 10:13 am #613252

    Zeshan
    Member

    Hi Alexandra,

    Yes, changing html option to true may enable HTML code in this popover. The code is located in cs-body.js file. However, editing the file directly may not work and not recommended at all either. You should write new JavaScript for this purpose. But as mentioned, this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this.

    Thanks for understanding. Take care!

    October 7, 2015 at 3:33 pm #615601

    Alexandra
    Participant

    Hi again,

    So, I tested the following scenario both ways: changing html to true and to false in cs-body.js, and this modification doesn’t make a difference, so I changed it back to the default false.

    I was able to get html to work with the popovers doing this:

    HTML inserted into Raw Element in Cornerstone:

    <head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<div class="popoverdiv">
      <a href="#" class="trigger"><img src="https://tpc.googlesyndication.com/simgad/11370948988336313361"></a>

<!-- title START -->

<h6 class="title hide">Hillary </h6>

<!-- content START -->
    <div class="content hide"><B><font color = darkorange>Career: </b></font>
      <small>Sec. of State <sup>('09-'13)</sup>
              <font color = darkorange><big> |</big></font>
      NY Senator <sup>('01-'09)</sup>
              <font color = darkorange><big> |</big></font>
      First Lady <sup>('93-'01)</sup></small>
      <br><B><font color = darkorange> Educ: </font></b>
      <small>Yale Law School (J.D. <em>law degree</em>) <sup>('73)</sup></small>
      <br><B><font color = darkorange>Experience: </font></b>
      <small> 43+ years 
              <font color = darkorange><big>|</big></font>
      visited 112 countries and flew nearly 1 mil. miles, serving as Sec. of State</small>
      <br><b><font color = darkorange>Age: </font></b>
      <small>67 <sub>(10/26/47)</sub></small>
      <br><B><font color = #00CD66> Hometown: </font></b> 
      <small>Chappaqua, NY <sub>(Born in Chicago, IL)</sub></small>
      <br><B><font color = #00CDCD>Religious Affl: </font></b>
      <small>attends Foundry United Methodist church 
              <font color = #00CDCD><big>|</big></font>
      mem. of Senate prayer and Bible study grp. 
              <font color = #00CDCD><big>|</big></font>
      raised Methodist</small>
        </div>
</div>

<!-- content END -->

    No CSS was added to Cornerstone’s ‘Custom CSS’.
    JavaScript inserted in Cornerstone ‘Custom JS’:

     $('.popoverdiv>.trigger').popover({
    html: true,
  	placement: 'right',
  	trigger: 'hover',
    title: function () {
        return $(this).parent().find('.title').html();
    },
    content: function () {
        return $(this).parent().find('.content').html();
    }
});

    So, this is apparently not a crazy customization, and feasible. What I’ve come across is that the twitter bootstrap library being called is version 3.2.0, rather than the most current version, which I believe is part of the reason I had so much trouble, and probably why others are having the same difficulties.

    Questions:

    • How can we update the scripts being implemented by X or override the ones Cornerstone is using with a child-theme? I’m mostly confused about this, as Cornerstone is technically a plugin, and doesn’t follow the hierarchy we would normally execute when setting up corresponding child folders & files.
    • Though my JS and HTML works, I’m not sure how to execute this same function w/multiple elements & their corresponding child elements, that is, w/multiple images w/html-enabled popovers, as my JS currently is only looking for/at specific elements named in the html (i.e., .popoverdiv>.trigger, .title, & .content).
    • The least of my worries, but I’m gathering Uncaught Type Errors (img attached).

    Thank you again! 🙂 And hopefully this helps anyone else w/the html issue regarding popovers.

    October 7, 2015 at 3:36 pm #615609

    Alexandra
    Participant

    Looks like my Questions showed as one giant illegible paragraph…

    1. How can we update the scripts being implemented by X or override the ones Cornerstone is using with a child-theme? I’m mostly confused about this, as Cornerstone is technically a plugin, and doesn’t follow the hierarchy we would normally execute when setting up corresponding child folders & files.

    2. Though my JS and HTML works, I’m not sure how to execute this same function w/multiple elements & their corresponding child elements, that is, w/multiple images w/html-enabled popovers, as my JS currently is only looking for/at specific elements named in the html (i.e., .popoverdiv>.trigger, .title, & .content).

    3. The least of my worries, but I’m gathering Uncaught Type Errors (img attached above).

    October 7, 2015 at 3:36 pm #615611

    Alexandra
    Participant
    This reply has been marked as private.
    October 7, 2015 at 9:20 pm #615931

    Rad
    Moderator

    Hi there,

    1. Unfortunately, that’s not possible. It’s not allowed to edit cornerstone’s core files and we can’t cover it. Cornerstone javascript files, the same as X theme javascript files are compressed and minified. You can only add your javascript code at Customizer’s custom javascript, Cornerstone custom javascript, and at child theme’s functions.php

    Example that you can add at your child theme’s functions.php

    add_action('wp_footer', 'my_custom_javascript', 999);

function my_custom_javascript () { ?>
<script type="text/javascript">
jQuery ( function($) {

$('.popoverdiv>.trigger').popover({
    html: true,
  	placement: 'right',
  	trigger: 'hover',
    title: function () {
        return $(this).parent().find('.title').html();
    },
    content: function () {
        return $(this).parent().find('.content').html();
    }
});

} );
</script>
<?php }

    Always remember that if you will use jQuery within your javascript, then you should always wrap them with this code block.

    jQuery ( function($) {

//your code here

} );

    2. Not sure what you mean, perhaps like this?

    jQuery ( function($) {

$('.popoverdiv > .trigger').each( function() {

var this_link = $( this );

this_link.popover({
    html: true,
  	placement: 'right',
  	trigger: 'hover',
    title: function () {
        return $( this_link.attr('href') + ' .title').html();
    },
    content: function () {
        return $( this_link.attr('href') + ' .content').html();
    }
});

} );

} );

    Then you can simply add your link like this,

    <div class="popoverdiv">
      <a href="#one" class="trigger"><img src="https://tpc.googlesyndication.com/simgad/11370948988336313361"></a>
<a href="#two" class="trigger"><img src="https://tpc.googlesyndication.com/simgad/11370948988336313361"></a>
<a href="#three" class="trigger"><img src="https://tpc.googlesyndication.com/simgad/11370948988336313361"></a>
</div>

<div id="one"><h6 class="title"></h6><div class="content"></div></div>
<div id="two"><h6 class="title"></h6><div class="content"></div></div>
<div id="three"><h6 class="title"></h6><div class="content"></div></div>

    And you will just add different content for #one, #two, #three which represent each link.

    3. It could be the effect of directly using $(), it should be wrapped bye code block as mentioned at #1. WordPress isn’t using $(), instead it uses jQuery()

    Hope these helps.

  • Author
    Posts