Tooltips in Rise 360

A popup or tooltip gives extra context or a definition for a term used in your course.

:root {

/* these are the colors for inline text that gets hovered */
   --rtt-text: black;
   --rtt-text-bg: white;
   --rtt-text-line: #666;
    
/* these are the colors for tooltip/popup bubble */
   --rtt-bubble: black;
   --rtt-bubble-text: white;
}

.block-text__col p u {
  display: inline-block;
  position: relative;
  color: var(--rtt-text);
  background-color: var(--rtt-text-bg);  
    font-weight:500;
  cursor: help;
  text-decoration-color: var(--rtt-text-line);
}

.block-text__col p u strong {
  opacity:0; 
    transition:opacity 0.5s;
    position:absolute; 
    bottom:2.1em; 
    min-width:230px; max-width:400px;
    border-radius:5px;
    padding:6px 9px;
    font-size:14px;
    display: block; pointer-events:none;
    left: 50%;
  transform: translateX(-50%);
    line-height:1.4;
    background:var(--rtt-bubble); 
    color:var(--rtt-bubble-text);
    font-weight:normal;
    
}

@media only screen and (min-width : 52.5em) {
 
.block-text__col p u strong img {max-width:100%; height:auto !important; padding:5px; display:block; background:white;}
}

.block-text__col p u:hover strong {
   opacity:1;  
}

.block-text__col p u strong::before {
  content: " ";
  position: absolute;
  bottom: -4px;
  background: black;
  width: 10px;
  height: 10px;
  left: 50%;
  transform: rotate(45deg);
}
    
 

@media only screen and (max-width : 52.5em) {

    .block-text__col p u strong {font-size:19px}
    .block-text__col p u strong{position:fixed; top:0; left:0; right:0; bottom:0; z-index:999;
    min-width:100%;  
    transform: translateX(0);
    padding:90px 30px 30px 30px; 
    background-color:rgba(1,1,1,.89); border:0px;
    }
    
    .block-text__col p u strong img {display:block !important; margin-bottom:1em}

    }