react-tabsの拡張ライブラリであるTabPanelでは
TabPanelで囲んだファイルと大元のファイルを統合して一つのページのように
振る舞うことができます。
これとdriver.js(URLはこちら) https://kamranahmed.info/driver.js/#single-element-no-popover を使ってヘッダーに
配置したボタンを押すとオーバーレイをかけたテキストを
表示するコードを書きたかったのですが大元のTopPageとpositionプロパティの相性が悪いのか
positionをleft-bottomに設定するとオーバーレイテキストが右に大きく突き出て
ページの要素が全て右に追いやられてしまいました。
</pre>
<div>
<div>skimMyname(){</div>
<div> const driver = new Driver();</div>
<div> driver.highlight({</div>
<div> element: '#some-element',</div>
<div> popover: {</div>
<div> title: '<em>An italicized title</em>',</div>
<div> description: 'Description may also contain <strong>HTML</strong>',</div>
<div> position: 'left'</div>
<div> }</div>
<div> });</div>
<div>}</div>
<div><Header skimMyname={this.skimMyname}/></div>
<div><TabPanel value={value} index={0}></div>
<div> <TopPage /></div>
<div></TabPanel></div>
<div><TabPanel value={value} index={1}></div>
<div> <SecondPage /></div>
<div></TabPanel></div>
<div> <TabList className="tabbar"></div>
<div> <Tab className="TopPage">{...props(0)}</Tab></div>
<div> <Tab className="SecondPage">{...props(1)}</Tab></div>
<div> </TabList></div>
<div></div>
</div>
<pre>
本来なら左下にオーバーレイテキストが表示されるのですが、右の余白が異常に長くなり
ページが崩れてしまう状況です。
試しに中で囲んでいるTopPage.jsで同じように実装をかけるとテキストが突きでずに正常に
表示されました。ナンデ・・・？
一応cssで以下のように要素をオーバーレイすることで問題は解決できますが
このページ以外でもdriver.jsを使う場合は全てこの変更した要素に合わせて
動くのでおすすめしません。
</pre>
<div>
<div>div#driver-popover-item{</div>
<div> display: block;</div>
<div> left: 30px;</div>
<div> top: 60px;</div>
<div> margin: 10px 40px;</div>
<div> }</div>
<div></div>
<div> div#driver-popover-item .driver-popover-tip.top.position-center{</div>
<div> left 75%;</div>
<div> }</div>
<div></div>
</div>
<pre>
設定したwidthの範囲を超えて表示されるのはページのpositionの問題かなと思ったのですが
両方absoluteなので基本的な開始位置は変わらないということでこの線はナシ。
とりあえずdriver.jsが正常に扱えるのはTabPanelで囲んでいる範囲内であり、大元のファイルでは
左下に表示されないことが分かったのでヘッダーを介したコーチングはこれにて保留することにしました。。
もしアップデートの余地があるなら吹き出しの大きさを変えるプロパティを要してほしいところです。
