css buttons in text areas

[Michael Kalada 2]

From this posthttps://community.spotfire.com/questions/i-am-looking-embed-css-scripts-inside-html-text-area-not-sure-where-place-them-so-they and this posthttps://spotfired.blogspot.com/2018/02/nice-little-round-button.htmlwe learned how to make really pretty buttons in text areas using css styling.

But what client is ever satisfied So now we want to add effects like hover, onclick animation, etc.

From herehttps://www.w3schools.com/css/css3_buttons.asp

i see standard css to format a button would be

.button{

background-color:#4CAF50;/* Green */

border:none;

color:white;

padding:15px 32px;

text-align:center;

text-decoration:none;

display:inline-block;

font-size:16px;

}

 

but in spotfire, you put the css styling in a javascript window like this

 

$("#buttoninput").css({

"color": "#26A2ED",

"border-radius": "8px",

"height": "50px",

"width": "150px",

"font-size": "25px",

"padding": "0px",

"position": "absolute",

"border": "2px solid #4CAF50",

"box-shadow": "0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)",

"transition-duration": "0.4s"

})

 

my question is, how to add the other css effects like hover, active, etc from herehttps://www.w3schools.com/css/css3_buttons.asp

[Colin Gray 3]

Hi there,

 

You can achieve this by just using tags inside your textarea HTML. You can even reference external CSS files this way. I prefer doing this method as it removes the need for Javascript when just styling HTML.

 

Here is an example using W3's tooltip code and I also use fontawesome to add a css icon to make my tooltip have a nice icon to hover over for the user. Of course, the fontawesome reference is not required for the tooltip, it was just an example of referencing an external CSS file.

 

One note of caution - when adding tags - be careful in what class or id names you use as it could interfere with those used by Spotfire.

 

 

/* Tooltip container */

.tooltip {

font-size: 14px;

position: relative;

display: inline-block;

}

 

/* Tooltip text */

.tooltip .tooltiptext {

visibility: hidden;

width: 460px;

background-color: #afafaf;

color: white;

text-align: center;

padding: 5px 0;

border-radius: 6px;

 

/* Position the tooltip text - see examples below! */

position: absolute;

top: 22px;

left: 30%;

z-index: 1;

}

 

/* Show the tooltip text when you mouse over the tooltip container */

.tooltip:hover .tooltiptext {

visibility: visible;

}

 

 

 

My Tooltip

 

Here is an example of using a tooltip from CSS in Spotfire

Hope this helps

 

Thanks

Colin

[Michael Kalada 2]

Thanks Colin.  I think your solution only works if HTML sanitation is turned off.  Is there a way to achieve the same with HTML sanitation turned on

[Colin Gray 3]

Apologies, Michael - I always have sanitisation off on my servers :) You can still use this example following a similar technique to the one described here: https://community.spotfire.com/wiki/how-include-your-own-instances-jquery-and-jqueryui-text-areasSo for my example above - add a javascript script to your text area which looks like:

// Your CSS you want to apply to your text areavar css = `/* Tooltip container */.tooltip {  font-size: 14px;  position: relative;  display: inline-block;}/* Tooltip text */.tooltip .tooltiptext {  visibility: hidden;  width: 460px;  background-color: #afafaf;  color: white;  text-align: center;  padding: 5px 0;  border-radius: 6px;   /* Position the tooltip text - see examples below! */  position: absolute;  top: 22px;  left: 30%;   z-index: 1;}/* Show the tooltip text when you mouse over the tooltip container */.tooltip:hover .tooltiptext {  visibility: visible;}`;// Add css to the holder div$("<style/>").text(css).appendTo($("#styleDiv"));

Then add a div tag with the same id as referred to in the last line of the Javascript above, to your text area:<div id="styleDiv">

</div><div class="tooltip" style="padding-top: 20px;"><b>My Tooltip</b>

<span style="padding-left: 4px;"></span>

  <span class="tooltiptext">Here is an example of using a tooltip from CSS in Spotfire</span>

</div>I tested this on the web player also and it worked for me.Hope this helps, and please let me know if you get it working :)ThanksColin

[Michael Kalada 2]

Works great, thanks so much!  This really opens a lot of doors, thanks again