8.7.0 to 8.8.0

Version 8.8.0 adds an emoji picker for SignalIQ, the ability to control studies from the chart legend, and enhancements to the user interface, drawing tools, and multi-charts. See release notes for more information.

Info tooltips

If you are continuing to use an v8.7.0 template and have customized your add-on info tooltip, you may need to create new CSS overrides. For reference, the new stylesheets contain the following code:

@charset "UTF-8";
/* CSS Document */

stx-hu-tooltip { display: none; } /* turn off "old" tooltip */

.ciq-night .hu-tooltip {
 border: 2px solid #4ea1fe;
 background-color: rgba(42, 81, 208, 0.75);
 color: white;
 }

.hu-tooltip {
 position: absolute;
 left: -50000px;
 z-index: 30;
 padding: 6px;
 border: 2px solid #4ea1fe;
 background-color: rgba(255,255,255,.9);
 color: #000;
 font-size: 14px;
}

.hu-tooltip caption {
 height: 0px;
 opacity: 0;
}

.hu-tooltip .hu-tooltip-sr-only {
 opacity: 0;
 font-size: 0;
}

.hu-tooltip [hu-tooltip-field]:first-of-type * {
 padding-top: 5px;
}
.hu-tooltip [hu-tooltip-field]:last-of-type * {
 padding-bottom: 5px;
}

.hu-tooltip .hu-tooltip-name {
 text-align: left;
 padding: 0 5px;
 font-weight: bold;
}
.hu-tooltip .hu-tooltip-name:after {
 content:':';
}

.hu-tooltip .hu-tooltip-value {
 text-align: right;
 padding: 0 5px;
}

.hu-tooltip-highlight {
 position: absolute;
 height: 100%;
 z-index: 10;
 background-color: rgba(191, 191, 191, .2);
}

Template updates

This change impacts all v8.7.0 templates except helloworld and the cross-section-related templates. The tooltip tag structure has been changed from custom tags to a table structure. Any HTML customizations to your tooltips need to be migrated to the new format.

In your v8.7.0 template, add the following v8.8.0 code:

<table class="hu-tooltip">
 <caption>Tooltip</caption>
 <tbody>
  <tr hu-tooltip-field="" class="hu-tooltip-sr-only">
   <th>Field<th>  <th>Value</th></tr>
  <tr hu-tooltip-field="DT">
   <td class="hu-tooltip-name">Date/Time</td>
   <td class="hu-tooltip-value"></td> </tr>
  <tr hu-tooltip-field="Close">
   <td class="hu-tooltip-name"></td>
   <td class="hu-tooltip-value"></td> </tr>
 </tbody>
</table>

For information on customizing tooltips, refer to CIQ.Tooltip.

Symbol Lookup dialog

The legacy Symbol Lookup dropdown dialog has been replaced by a new pop-up dialog.

Developers who upgrade the library and CSS, but want to keep their 8.7 HTML template and continue to use the dropdown dialog, there is nothing to do, everything should work as always.

To use the new pop-up dialog with an 8.7 HTML template, do the following:

  1. Apply any customizations made to the legacy dropdown dialog web component, to the new pop-up dialog web component.

  2. Update the template markup to replace the symbol input widget with buttons for primary and comparison symbols; replace

    <cq-menu class="ciq-search">
      <cq-lookup cq-keystroke-claim cq-uppercase role="search"
        aria-labelledby="mainSymbol"
        label-name="mainSymbol"
        label-text="Main Symbol"
        class="hide-label"
      >
      </cq-lookup>
    </cq-menu>
    

    with

    <cq-clickable
      role="button"
      class="symbol-search"
      cq-selector="cq-lookup-dialog"
      cq-method="open"		>
      <span class="ciq-lookup-icon"></span>
      <cq-tooltip>Symbol Search</cq-tooltip>
    </cq-clickable>
    
    <cq-clickable
      role="button"
      class="symbol-search"
      cq-selector="cq-lookup-dialog"
      cq-method="open"
      comparison="true"    >
      <span class="ciq-comparison-icon"></span>
      <cq-tooltip>Add Comparison</cq-tooltip>
    </cq-clickable>
    
  3. If you want users to be able to click on the chart title and invoke the pop-up dialog, add the new cq-activate-symbol-search-on-click attribute to the chart title element in your template; replace

    <cq-chart-title cq-marker cq-browser-tab></cq-chart-title>
    

    with

    <cq-chart-title cq-marker cq-browser-tab cq-activate-symbol-search-on-click></cq-chart-title>