[Tooltip] ツールチップのスタイル

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://demo.grapecity.com/wijmo/sample/scripts/sample.js"></script>
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
<div class="container">

  <h1>ツールチップのスタイル</h1>
  <p>Tooltip.cssClassプロパティが追加され、ツールチップのCSSクラスとスタイルを定義することで、様々なスタイルでツールチップを表示できるようになりました。</p>
  <span id="tt1">ツールチップ1</span><br>
  <span id="tt2">ツールチップ2</span>

</div>

CSS

.tooltip1 {
  background: lightpink;
  color: red;
}
.tooltip2 {
  background: lightgreen;
  color: green;
}

JavaScript

var tt1 = new wijmo.Tooltip();
tt1.cssClass = 'tooltip1';
tt1.setTooltip('#tt1', 'これは<b>1つ目の</b>ツールチップです。');
var tt2 = new wijmo.Tooltip();
tt2.cssClass = 'tooltip2';
tt2.setTooltip('#tt2', 'これは<b>2つ目の</b>ツールチップです。');