As a transitional step, this site will temporarily be made Read-Only from July 8th until the new community launch. During this time, you can still search and read articles and discussions.

While the community is read-only, if you have questions or issues requiring TIBCO review/response, please access the new TIBCO Community and select "Ask A Question."

You will need to register or log in or register to engage in the new community.

Using Spotfire Text Areas to Increase Usability of Analytics through HTML, Javascript and CSS

Last updated:
6:40am Feb 10, 2022


Introducing analytics to a wider audience requires the analytics to be as accessible, usable and familiar to end users as possible. TIBCO Spotfire enables extensive customisation of Text Areas through the use of Javascript, CSS and HTML. This page will act as a repository for a series of quick tricks and tips on how to get the best user experience using Text Areas. Note that these examples do not require any additional libraries such as jQueryUI, so do not require external references to implement. Since Spotfire 11.5 and above jQueryUI has been removed, so the examples here are designed to work regardless of this change. 

Default Styling of HTML

Create Modern Styled Links and Buttons

Create Foldout Side Panel

Pop Up Content and Forms

Accordions in Text Areas

CSS Tooltips

Show and Hide Content

Autocomplete Search Box

Date and Time Pickers


Text Area Examples

Below is a list of example usages of HTML, CSS and Javascript within Spotfire Text Areas. Each example has the code used that you can copy and adjust to suit your needs. These are just short examples, and of course should be tested and checked within your own environment and Spotfire analyses.

Note that in later releases of Spotfire (11.5 onwards), inclusion of jQuery may require to be manually added. You can view how to add jQuery to your Spotfire tools by reading this community article.

Default Styling of HTML in Text Areas

By default Text Areas display HTML in their unstyled format i.e. as your browser renders them. Therefore, you can apply your own styles to provide a custom and more modern look to your analytics and dashboards. This is achieved by adding a CSS (cascading stylesheet) to your Text Area. To do this in a safe manner that works with HTML Sanitation On (see links below on this), we add this as a Javascript script. Follow these steps to do this:

  1. Add a Text Area to your analysis. Right click on this Text Area and selected Edit HTML:

  2. Click the icon to the right of all the icons that says Insert Javascript when you hover it. Then select New Script and the script editor window will appear:

  3. To add your css as Javascript you need to add your CSS as a variable in Javascript. Then you inject this CSS code into an HTML tag via Javascript. See the code example below:

    // Enter your CSS as a variable in Javascript
    // Note the ` used to enclose this. 
    // This is different from other quotes and important!
    var css = `
      padding: 4px;
      vertical-align: top;
      text-align: left;
      padding: 8px 4px 0 2px;
      font-size: 13px;
      font-size: 16px;
      color: #73AE57;
      padding: 0px 0px;
      margin: 6px 0px 0px 0px;
    h3.banner, h4.banner{
      display: block; 
      background-color: #379CDB; 
      padding: .5em; 
      margin: 0px;  
      color: white; 
      font-weight: 100; 
      text-align: left;
    div.layout a{
      color: #26A2F0;
      border: 1px solid #efefef;
      background: #fff;
      padding: 4px 0px 0px;
      margin: 0px 0px 4px 0px;
      cursor: pointer;
      border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      height: 26px; 
      font-weight: 500;
      font-size: 15px;
      width: 174px;
      display: inline-block;
      text-align: center;
    div.layout a:hover{
      background: #efefef;
      cursor: hand;
      text-decoration: none;
    div.layout a:active {
    div.layout input {
    	height: 22px;
      display: none;	
    // Inject the CSS into an HTML tag which has the id StyleDiv
  4. Finally, we need to add a HTML tag to our Text Area HTML so the CSS is injected into this by matching the id of the HTML tag to the last line of the code above:

    <!-- Put this at the top of your text area HTML -->
    <div id="styleDiv"></div>

    Now any HTML which matches any of the CSS selectors will be styled. For instance here is an HTML example using the code above:

    <div id="styleDiv"></div>
    <div class="outline-border" align="center">
    <DIV class="layout" >
    Show me analysis of:<br /><br />
    <SpotfireControl id="b0903917735c4ed2b539aa6edcddbfa3" /><br />
    <SpotfireControl id="f03112662ddf4d68b42aaf62f6e3c9bf" /><br />
    <SpotfireControl id="8bc2659cb44945d586c42f3ffcc2dce3" />
    <div class="outline-border" align="center">
    <h3 class="banner">Other links</h3>
    <DIV class="layout">
    <SpotfireControl id="35f7202a09e24be8ab178ffb29382a05" /><br/ >
    <SpotfireControl id="2d139f3d6f7242f2a8f33db591fec47d" />
    <div id="current-page" class="hide-content">
    <SpotfireControl id="29676a3593a244c88ae0d7867b57ac42" />

    The result of using these code examples is this:

    More on this below...

Create Modern Styled Links and Buttons

Each Spotfire control you add is rendered as HTML. So by styling the HTML you can alter how your Spotfire action controls look for example. Using the technique above to add CSS via Javascript into our Text Area, we can alter how any action control appears whether it is a Link or Button action control. In this example, the Spotfire Controls are all action controls which are set to Links. The CSS code above alters any 'a' HTML tag found in a 'div' tag with the class 'layout'. The result is shown on the left of the video below.

An additional aspect of this is to change the highlighting of the button to the last clicked. This can be done by storing which button/link was last clicked in a document property, and then reacting to this in Javascript to change the style of the relevant button.  Follow these steps here to achieve this:

  1. Add a label into your Text Area and assign it a document property (of type String). In my example, my document property is called clickedLink:

  2. As in the example above, put this Spotfire Control inside a DIV tag which has a unique id assigned to it (above it is called current-page).

  3. Add a line to the script that runs when someone clicks your action control links/buttons to set this document property to be the same as the text in the action control:

    The code being: Document.Properties["clickedLink"] = LinkName

    Notice that LinkName is a script parameter passed into the script. You can then specify which value gets assigned to this in your Action Control edit screen. It is worth checking that when you click on an action control link that this document property gets updated as expected before moving onto the next step.

4) The final step is to add the Javascript to alter the link/button to highlight which button was clicked on last. Add a new javascript file which has the code:

// grab the value of the document property by taking the inner text of the div
var currentPage = $('#current-page').text().trim();
// change style of link to page user is actually on
$('a:contains("' + currentPage + '")').css('background','#E4F0DE');

// react to clicks on links on same page
// this monitors the document property for changes

    // grab the button text that was clicked last from the document property
	currentPage = $('#current-page').text().trim();
    // change style of link to page user is actually on    
	$('a:contains("' + currentPage + '")').css('background','#E4F0DE');

	// set any link that isn't the one selected back to default style
	$('a:not(:contains("' + currentPage + '"))').css('background','#fff');


Note that to use this example you need to match all the names and ids used i.e. current-page etc.

A similar example of styling buttons can be read here:

Create Fold Out Side Panel

The side menu consists out of 4 types of elements:

  • A native Spotfire filter or pieces of text
  • An accordion animation that collapses anything you place in it into a single row, which you can open and close by clicking on it
  • A side-bar animation that collapses anything you place in it into a single column, which you can open and close by hovering the mouse pointer over it.
  • Icons that are described in a stylesheet that can be stored on the web or on your own server.

The elements are organized in the side menu as such:

  • Pieces of text (describing for example information about the Spotfire page) and Spotfire native filters are placed inside an accordion animation
  • Accordion animations, as well as buttons or links to help-emails, are placed in the side bar animation. NOTE: these additional elements are not required for the side panel but rather act as additional template ideas for enhancing your Spotfire analyses and side panels. These require jQueryUI which was removed in Spotfire version 115. and beyond. So the downloadable template at the bottom of this page follows this guide to include your own jQueryUI. This ensures future compatbility with Spotfire.

The code is organized as such, and as in the example of the attached side_panel_template_with_jqueryui.dxp file:

  • The text visualisation (right-click on the side menu>edit HTML; the text visualisation is hidden behind the side bar) contains HTML code (and CSS styling) that describes all the text in the menu as well as the inserted Spotfire filter elements.
  • All of this is wrapped into a <div> container onto which JQuery script is called (inserted in the same text visualisation as an element) for animating that the bottom row collapses.
    • The div ID is the name of the JQuery script that performs the collapsing of items.
      • Additional styling can be imposed by referring to a class in the div, to determine the spacing (height) of the rows. So anything outside (below) the row, anything that does not fit in the height determined to be the row height of the collapsed accordion, will be collapsed.
    • The top row consists of an icon and a title text. These are not collapsed by the accordion animation as long as their body height is below that of the accordion.
    • The bottom row contains the filter or text element that is collapsed. 
      • Note that this row reaches beneath the Icon as well. If you remove the spacings (“&nbsp;”) in front of the Spotfire filter the filter will move underneath the icon when when the side bar and accordion are opened.
      • So effectively, each of the menu items consists of a the top row that consists of 2 cells, and a (collapsible) bottom row that consists of one cell.
  • All the divs are then wrapped by the <ul class="side-menu"> container, as well as a styling container (<li class="spotli">).
    • <ul class> refers to the JQuery script defining the side menu opening and closing. In this animated element the accordion animations are placed, and in those are the native spotfire filters and other text.
  • The icons are described in a stylesheet.
    • With a JQuery element that is inserted in the same text visualisation, you refer to the stylesheet that is a collection of icons.
    • It is best practice for security and for maintenance (who knows when a third party may change something in the stylesheet without you knowing) to store this on your own Spotfire server and refer to that through the same JQuery element.
    • In this template for easy sharing purposes, we refer to the free aswesomefont stylesheet hosted on their server.

Here is the HTML code that can be used for the Text Area:

<ul class="side-menu" style="overflow:hidden; bottom:28px;">
	<li class="spotli">
		<div id="accordion" class="spotli ws-menu-button" style="border-color:#17292a;background:#17292a">

			<H4 style="background:#17292a;border-color:#17292a"><a href="#">
				<span class="fa fa-info-circle"></span>&nbsp;&nbsp;Page Info</a></h4>
				<span style="color:white;background:#17292a;border-color:#143f3f">
							<td style="color:white;border-color:#17292a;background:#17292a" width="45px">&nbsp;
							<td width="200px"><font face="century gothic">
								<p>Place page info or a filter in this container.</p></font>


If you follow this and use the template attached (see bottom of the page) for the additional scripts, the results should behave as the example shown below:

Read the blog on this:

Adding Spotfire Drop Downs and Other Controls to the Floating Side Panel

When adding Spotfire controls to your side panel such as a drop down menu, you may sometimes find they disappear behind the side panel, and that the side panel collapses as you select an item from the drop down. This in particular will happen with the updated jQuery version and removal of jQueryUI from Spotfire version 11.5 and above. Below are suggested changes (which are also applied in the downloadable template DXP), which mean drop downs stay on top of the floating side panel but also that the side panel will not collapse until the item in the drop down has been selected. 

1) Wrap any drop down controls in a DIV tag and give it an Id or a class. The Id or class name is important as it allows the Javascript to identify where the drop down is. In this example we have used the class of 'dropdown-sidepanel':

	<div style="color:white;background:#17292a;border-color:#17292a" class="dropdown-sidepanel">
		<SpotfireControl id="c4766eaa6cbc48d7800b1c490aa491f4" />

2) Add to a Javascript script, or append to an existing script such as the floating side panel Javascript the following:

// updated mouseout code for the side menu

  // detect if a drop down is open and if it is, prevent the side panel collapsing
  if ($('div.DropdownListContainer').length == 0){

// Fix for drop downs disappearing behind side panel
	$(".DropdownListContainer").css("zIndex", 999);

// prevent the side panel from folding away when the drop down is interacted with

It is important to note that as Spotfire dynamically generates drop downs (and other controls), the example above is referencing content automatically generated by Spotfire (with the class DropdownListContainer). This could therefore affect other drop downs outside of the side-panel as all drop downs generated opened by a user will also have this class. In future versions of Spotfire this CSS class could change and therefore this code may not function in future versions. 

Pop Up Content and Forms

Using CSS and sometimes Javascript, it is possible to create popup content i.e.content that is hidden until the person clicks on a link for example. This can be good for hiding forms or additional content you don't alreays want to display. In Spotfire this can be used to hide filters or document property controls for example. The example below is a pure CSS example, so does not require Javascript (inspired by this codepen example: However, there are many other options which do include Javascript.

1) Add a Javascript script to your text area which contains the CSS from the above link using the technique shown in the first example on this page. Here is the code used in the video below:

// change the first position below to be 'fixed' and the pop up box will appear outside the text // area (but this can cause other things such as annotations to be highlighted also)
var css = `

.spotfire-popup-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;

.spotfire-popup {
  margin: 40px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 40%;
  position: relative;
  transition: all 5s ease-in-out;

.spotfire-popup .spotfire-popup-close {
  position: absolute;
  top: 0px;
  right: 10px;
  transition: all 200ms;
  font-size: 28px;
  font-weight: bold;
  text-decoration: none;
  color: #000;
.spotfire-popup .spotfire-popup-close:hover {
  color: #222;
.spotfire-popup .spotfire-popup-content {
  max-height: 30%;
  overflow: auto;


// Inject the CSS into an HTML tag which has the id StyleDiv

// override the click events and apply styles for popups to open and close
	$('.spotfire-popup-overlay').css("visibility", "visible");
	$('.spotfire-popup-overlay').css("opacity", 1);

	$('.spotfire-popup-overlay').css("visibility", "hidden");
	$('.spotfire-popup-overlay').css("opacity", 0);


2) Now you just need to add HTML to use these styles. There are two parts - the link to click to view the pop up, and the pop up itself:

<DIV id="styleDiv"></DIV>

<!-- The link to click -->
<div class="layout">
<a href="#" id="spotfire-popup">Click To Pop Up</a>

<!-- the popup content -->
<div id="spotfire-popup1" class="spotfire-popup-overlay">
 <div class="spotfire-popup">
   <div class="spotfire-popup-content">
    <div class="layout">
	Username: <SpotfireControl id="049b3df609f44f6eac7bc1a819bf97d8" />
    <a href="#" class="spotfire-popup-close">&times;</a>

Now you have a pop up form inside your text area such as is shown below:

Note that you can make the pop up appear outside of the Text Area. This is done by changing the first position style of the Javascript style you added in step one to be fixed instead of absolute. However, this can have adverse impact on other elements in Spotfire, so check it functions in the desired way.

Accordions in Text Areas

Having accordions in Text Areas can be very useful as it not only saves space by hiding content not in use but means you can have a lot of options and HTML in a text area without it being over cluttered and allowing for it being arranged into categories. Below is the code to add an accordion to your Text Area. Note this example was inspired by this example on CodePen:

1) Add a Javascript script to your text area which contains the CSS from the above link using the technique shown in the first example on this page. Here is the code used in the video below:

var css = `
div.accordion-container ul {
    list-style: none;
    padding: 0;

div.accordion-container ul .inner-visible {
	display: block !important;
	visible: visible;
	padding-left: 1em;
	overflow: hidden;

div.accordion-container ul .inner-hidden {
	visibility:hidden !important;
	padding:0px !important;
	border:0px !important;
	height:0px !important;
div.accordion-container li {
	margin: .5em 0;
div.accordion-container li div.toggle {
	width: 98%;
	display: block;
	background-color: #ebfaeb;
	padding: .75em;
	border-radius: 0.15em;
	transition: background .3s ease;
	cursor: pointer;

div.accordion-container li div.toggle:hover {
	background-color: #adebad;




2) Now add another Javascript script to your text area which has the actual Javascript to make the accordion work. Note you could combine these scripts but separating the scripts may help maintain and make making changes easier. Here you can paste the Javascript code as shown here: 

$(function() {
  // react to click event of any .toggle class
  $('.toggle').click(function(e) {
    // grab what was clicked
    var $this = $(this);

    // flip style to show or hide content
    // change symbol beside header text
    if($this.find("span").text().trim() == "+"){
        $this.find("span").text(" - ");
    } else{
        $this.find("span").text(" + ");


Now you can HTML to your Text Area which will implement the accordion. Here is the HTML from the example video below:

<div id="styleDiv">

<div class="accordion-container">
<ul class="accordion">
    <div class="toggle">Boosted Trees<span> + </span></div>
    <div class="layout inner-hidden">
	You can place any content you like here whether it be HTML, or Spotfire filters and controls: <SpotfireControl id="cc9537981b4d41a7ba5be193c7701cc6" /><br><br>
	<SpotfireControl id="83b21dbd8a514af9a71e12658f7f9c28" />
    <div class="toggle">Random Forest<span> + </span></div>
    <div class="layout inner-hidden">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>


In the above HTML each li (bullet) tag contains an aera which will open and close. The first div inside this with the class 'toggle' is the header for the accordion area. The content inside the next div is what is shown when that accordion area is opened. If you want an area to start opened when someone visits the page use the style inner-visible. If you want an area or all areas closed by default, then use the class inner-hidden on all your divs.

The final result:

Note that this example uses button HTML tags which are not allowed with HTML Sanitation On (see content on this at the end of the article). In this case you can change the buttons to be other tags such as 'a' anchor tags.

CSS Tooltips

This example shows how to add tooltips to HTML content with only using CSS. Again, like the other examples, add your CSS by adding a javascript script to your Text Area and paste in this (largely CSS) code. This example is inspired by this example:

1) Add Javascript script to your Text Area. Note you can alter all the positions and styles in this code to suit your own tooltips:

var css = `
/* Tooltip container */

a.custom-tooltips {
	position: relative;
	display: inline;

a.custom-tooltips span {
	position: absolute;
	color: #FFFFFF;
	width: 200px;
	background: #000000;
	text-align: center;
	visibility: hidden;
	border-radius: 6px;
	line-spacing: 8px;
	padding: 6px;

a.custom-tooltips span:after {
	content: '';
	position: absolute;
	top: 100%;
	left: 35%;
	margin-left: -8px;
	width: 0;
	height: 0;
	border-top: 8px solid #000000;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;

a:hover.custom-tooltips span {
	visibility: visible;
	opacity: 0.8;
	bottom: 30px;
	left: 50%;
	margin-left: -76px;
	z-index: 999;

	margin: 50px 0px 0px 50px;




2) Add HTML to your Text Area to set the tooltip text. In the code below the span tag contains the text that will be shown when someone hovers their mouse over the content shown in the Div with the class 'tooltip'. Note the div with the id styleDiv which is required for the CSS to be injected into from the Javascript code added above. 

<div id="styleDiv"></div>

This demo can be altered to change where the tool tip appears i.e. right, above, etc. (see HTML source)
<div class="margins">
	<a href="#" class="custom-tooltips">I am a tooltip
	<span>Example of using a tooltip from CSS in Spotfire</span>


The final result:

Show and Hide Content

Another useful technique can be to control which content is shown in a Text Area based upon a value or Document Property. This can achieved by adding a label to your Text Area which contains a Document Property. This document property could be set by a script, or another control such as a drop down for instance. In the example below we are using a drop down to set the document property.

1) Add a drop down control to set the document property which will control if the content is shown or hidden:

2) Then add a Label to your Text Area which has the document property from the drop down you added, assigned to it. Wrap this Spotfire Control in a div tag and give it an id. In this example we are using the id: showhide-content. This id will be referred to in the Javascript

3) Now add some content you want to be visible or hidden based upon this document property, and wrap it in a div (or similar) tag and give it an id. In this example, the id we are using is: content-control and the code is:

<div id="content-control"><br />
<h4>I am visible...</h4>


4) Now add this following Javascript which will set the visibility of the content:

// bind to watch for changes to the document property
    // get the value of the document property
	var displaySetting = $('#showhide-content').text().trim();

	// you could also just use .toggle() here
	if (displaySetting == "display"){



The final result:

Autocomplete Search Box

Click this following link to go the wiki guide on how to create an autocomplete search bar in Spotfire

Date and Time Pickers

Read this wiki article to find out how to include date and time pickers in your Spotfire Text Areas:

HTML Sanitation

Each of the examples above can be used in Spotfire Text Areas without any additional Javascript libraries, and with HTML sanitation on or off. Want to read up on this setting, see the following articles:

The guides in the examples here all rely on the last link above. 

License:  TIBCO BSD-Style License


Binary Data side_panel_template_with_jqueryui.dxp910.82 KB

Feedback (7)

@curiousanalyst I have added an example around making drop downs work properly in the floating side panel. This required some CSS changes to the template (turning down the z-index of the side panel to 100 or anything lower) and then some Javascript to control how the drop down displays when interacted with vs the side panel. I wonder if this might help with your use case? 

You can see the code in action in the downloadable DXP on this page

Colin Gray 6:42am Feb. 10, 2022

Update: Thanks, Colin! That did the trick. <br>

When we upgraded to Spotfire 11.3 the toggles we included in the flyout are dropping behind the flyout in the thick client we use for development, not the webplayer version for end users. We've tried adjusting the position and z-index of the flyout and toggles but because the flyout has a position of fixed to work, we're not finding the solution we need. Anyone have any suggestions? 

CuriousAnalyst 12:18pm Feb. 10, 2022

I have updated the accordion example so there are no conflicts with some Spotfire controls in some use cases. This new method is more robust. 

Colin Gray 6:49am Apr. 01, 2021

Hi Marcio - I think technically it might be possible (I presume you mean a drop down created using a Text Area in Spotfire) but it means overriding the styles applied by Spotfire behind the scenes. As Spotfire generates dropdowns as divs dynamically, it can be hard to control this. It also has a risk that if you override the styles of these div dropdowns, the Spotfire code could change in future versions and break your styling.

For this reason, I always recommend never to override Spotfire's own HTML or CSS.

Colin Gray 3:08am Jun. 18, 2020

Hello Collin!

Is there any chance to stylize a Dropdown using the same technic above?



marcio.sergio 2:31pm May. 21, 2020

Hi Colin,

Thanks for sharing all those useful tips to (steal) use.

Regarding HTML sanitation and taking into account the level of customisations that is curently possible to achieve using external libraries, CSS, JS, etc within TextAreas... and many of those customisations readily avilable in Do you think is still advisable to keep HTML sanitasion on from a security point of view?

clruiz 6:44am May. 07, 2020


Thanks for sharing this. It looks really great. I have a question about how to allow two text area overlapping. 

chunleiliu1995 11:55am May. 01, 2020