I am trying to include an introJS
tour into a xaringan presentation but encounter a formatting error (see screenshots below). I suspect it has something to do with css, but I don't where to start.
Additionally, using the arrows (usually to navigate the tour, when the tour is active), also triggers changing the slides using remark.js. Something I can live with, but would be nice to have it properly working...
Interestingly, the preview window of RStudio renders the user tour correctly.
Any ideas how to fix this?
A note on rintrojs: as I am not using shiny
as a backend, I cannot use the rintrojs
package but include the intro.js
and introjs.css
scripts directly.
Base Rmarkdown example
---
title: "Tester"
output: html_document
---
<!--- Include IntroJS --->
<script language="JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/intro.min.js"></script>
<style type="text/css">
@import url("https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/introjs.min.css");
</style>
<!--- Create divs and button for starting the tour --->
<div id="target" data-step="1" data-intro="This is a tooltip!">
TARGET 1
</div>
<div id="target2" data-step="2" data-intro="This is another tooltip!">
TARGET 2
</div>
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start();">START INTROJS</a>
Xaringan Rmarkdown example (broken)
Note that only the yaml-header has changed!
---
title: "Xaringan Tester"
output: xaringan::moon_reader
---
<!--- Include IntroJS --->
<script language="JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/intro.min.js"></script>
<style type="text/css">
@import url("https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/introjs.min.css");
</style>
<!--- Create divs and button for starting the tour --->
<div id="target" data-step="1" data-intro="This is a tooltip!">
TARGET 1
</div>
<div id="target2" data-step="2" data-intro="This is another tooltip!">
TARGET 2
</div>
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start();">START INTROJS</a>