Carl Carl - 3 months ago 20
CSS Question

render raw HTML in R Markdown

I am trying to include a short piece of working code from this JSfiddle: https://fiddle.jshell.net/atypq97m/3/ in a R Markdown document.

There is a Pandoc extension for including HTML according to this: http://rmarkdown.rstudio.com/authoring_pandoc_markdown.html#raw_html

I can render HTML, but I find the behavior is odd. When I copy and paste the code from my JSfiddle, and put it in R Markdown it functions differently.

Here is my code:

---
title: "Untitled"
author: "CG"
date: "6 September 2016"
output:
html_document:
md_extensions: +raw_html
---

<style type="text/css">

.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
visibility: hidden;
position: absolute;
z-index: 1;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}

</style>


<div class="tooltip">Hover over me
<span class="tooltiptext">
Hello World
</span>
</div>
<br>
<br>
<br>
<div class="tooltip">Or hover over me
<span class="tooltiptext">
Hello World
</span>
</div>


If I remove the CSS or the classes in the HTML the content renders (without the functionality), but if I keep the CSS and the classes I find that none of the text appears. This indicates that Rmarkdown/Pandoc is interpreting the CSS differently than JSfiddle, but I don't know why.

Answer

The different behavior is a result from the fact that the class .tooltip is already defined in the default theme used for RMarkdown documents.

If you are using the default theme for RMarkdown, then you will find the class inside the bootstrap.css file located at (for OSX users):

/Library/Frameworks/R.framework/Versions/3.3/Resources/library/rmarkdown/rmd/h/bootstrap-3.3.5/css

This is what you will find:

.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  white-space: normal;
  filter: alpha(opacity=0);
  opacity: 0;

  line-break: auto;
}