Articles in this section

How to Create a Custom Tooltip

  • Updated
Follow

This article describes how to use R code to create a custom tooltip from HTML and CSS that appears when hovering over a set object:

tooltip.png

Requirements

  • A little knowledge of CSS and HTML will be advantageous.
  • Please Note: While this article can serve as a guide, our support team cannot help with custom CSS coding, as it is well outside of our expertise.

Method

  1. Go to Calculation  Calculation icon.png > Custom Code and click on the page.
  2. Paste the following code into the R CODE area in the object inspector and click Calculate.
html <- paste("<style>
.tooltip{ /* The tooltip container */
position: absolute;
top: 18px;
right: 18px;
text-align: center;
background-color: #4F8AC2;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: default;
}

.tooltip:before{ /* The content of the tooltip before hover */
content:'?';
font-weight: bold;
color:#fff;
font-size: 15pt;
}

.tooltip:hover p{ /* The tooltip container on hover */
display:block;
transform-origin: 100% 0%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}

.tooltip p{ /* The tooltip text when hovering */
display: none;
text-align: left;
background-color: #1E2021;
padding: 20px;
width: 300px;
position: absolute;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: -4px;
color: #FFF;
font-size: 13px;
line-height: 1.4;
}

.tooltip p:before{ /* The pointer of the tooltip */
position: absolute;
content: '';
width:0;
height: 0;
border:6px solid transparent;
border-bottom-color:#1E2021;
right:10px;
top:-12px;
}

.tooltip p:after{ /* Prevents the tooltip from being hidden */
width:100%;
height:40px;
content:'';
position: absolute;
top:-40px;
left:0;
}

/* CSS animation */
@-webkit-keyframes fadeIn {
0% { 
opacity:0; 
transform: scale(0.6);
}

100% {
opacity:100%;
transform: scale(1);
}
}

@keyframes fadeIn {
0% { opacity:0; }
100% { opacity:100%; }
}</style>")

html <- paste(html, '<div class="tooltip"><p>You can enter any text that you want to appear in your tooltip!</p></div>')

rhtmlMetro::Box(text = html, text.as.html = TRUE)

Some things to note in the above code:

  • .tooltip is where you set the tooltip container's position, background color, font size, and shape (i.e. border-radius at 0% is a square but is a circle at 50%). In this example, it is also positioned on the right, but you can remove the right argument in all the CSS sections to position the tooltip container on the left instead.
  • .tooltip:before is where you set the content of the tooltip prior to hover. In this example, it is a question mark.
  • .tooltip p is where you set the tooltip text container that appears on hover, including background color, position, font size, and shape.
  • .tooltip p:before is where you set the triangular pointer between the tooltip object and the text container that appears on hover.
  • html is where you enter the content of your tooltip on hover.
  • rhtmlMetro::Box is the R function that can render the HTML and CSS code within the calculation.

While this example uses a custom blue circle with a question mark as the object to hover over, you can also use icons, such as those created by Font Awesome. See How to Use R Code to Create Icons for further details.

 

Next

Customizing Online Reports/Dashboards

How to Use R Code to Create Icons

How to Customize the Navigation Pane in View Mode

How to Remove the Header Strip in View Mode

How to Center the Document Relative to the Entire Screen in View Mode

How to Hide Buttons in the Export Menu in View Mode

How to Hide the Document Name in View Mode

Related articles