Skip to content

Premium plugin : Tooltip

Guillaume Bonnaire edited this page Aug 31, 2022 · 6 revisions

JSpreadsheet Plugin : Tooltip

You can buy this plugin on Repo plugin summary Demo is available on demo

Dependencies

Options of plugin

Option name Description Type Default Value
positionHorizontal Position Horizontal of tooltip string "right"
positionVertical Position Vertical of tooltip string "bottom"
forComments Active tooltip for comments boolean false
fixedValue Fixe length value in tooltip boolean true

For translation

If you use general translator, you can translate this plugin to replace "text_" by "tooltip_"

Option name Default Value
text_copytooltip Copy tooltip text
text_copytooltipall Copy all tooltip text
text_copytooltipvalueof Copy value of
text_copytooltipcol column
text_copytooltiprow row
text_notificationvaluecopied Value copied to clipboard

Methods of plugin

Method Description Example
setTooltip(String cellName, String|Object|Array message, *optional* String type, *optional* Boolean removeOnChange ) -> Void Set tooltip for one cell. Message can be an object of value or Array. In this case, on tooltip use can copy value jspreadsheet.current.plugins.tooltip.setTooltip("A1", "My tooltip"); or myTable.setTooltip("A1", "My tooltip");
removeTooltip(String cellName) -> Void Remove tooltip for one cell jspreadsheet.current.plugins.tooltip.removeTooltip("A1"); or myTable.removeTooltip("A1");
getTooltipType(String cellName) -> String get tooltip type for one cell jspreadsheet.current.plugins.tooltip.getTooltipType("A1");

Helpers

For help to set type, you can use helper

  • For tooltip type info : jspreadsheet.helpers.tooltipType.info
  • For tooltip type success : jspreadsheet.helpers.tooltipType.success
  • For tooltip type warning : jspreadsheet.helpers.tooltipType.warning
  • For tooltip type error : jspreadsheet.helpers.tooltipType.error
  • For tooltip type comment : jspreadsheet.helpers.tooltipType.comment

Get started

Header on page

<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v9/jspreadsheet.css" type="text/css" />

<script src="/path/to/jss.tooltip.js"></script>
<link rel="stylesheet" href="/path/to/jss.tooltip.css" type="text/css" />
</script>

Initialize plugin on JSpreadsheet

var myTable = jspreadsheet(document.getElementById('spreadsheet'), {
	...
	plugins: [
      ...
   	  { name:'tooltip', plugin:jss_tooltip, options:{
                    forComments: true,
                    tooltips: {
                          "A1": {message: "one error example", type:jspreadsheet.helpers.tooltipType.error},
                          "B1": {message: "one warning example with <i>HTML</i><hr>Ok!", type:jspreadsheet.helpers.tooltipType.warning},
                          "C1": {message: "one success example", type:jspreadsheet.helpers.tooltipType.success},
                     }
          }},
      ...  
    ],
    ...
});

// Other way for setTooltip
myTable.setTooltip('A3', {name:'One object', valueString:'OK', valueBoolean:true, valueNumber:4});
myTable.setTooltip('B3', [[1,2,3], [4,5,6], [7,8,9]]);
myTable.setTooltip('C3', [
     {col1: "A", col2: 5, col3: 2.5},
     {col1: "B", col2: 6, col3: 2.3},
     {col1: "C", col2: 1, col3: 1.5, col5: "Test string"},
     {col1: "D", col2: 2, col3: 2.1}
]);

Copyright and license

Copyright GBonnaire.fr and Code released under the commercail License. This plugin requiere license of Repo.gbonnaire.fr