AnsweredAssumed Answered

tooltips for text in story map

Question asked by evanfedorko on Nov 22, 2017
Latest reply on Nov 27, 2017 by evanfedorko

Hi. I am creating a story map (map journal template) and in order to save space I would like to use tool tips with certain key words within the body of my text. I found from this article that I could not use the style property, but that I can create a class and use the <style> tag. I created this code and tested it locally (it worked) and put it in my story map section through the source button:


<p class ="tooltip"></p>


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

.tooltip .tooltiptext {
visibility: hidden;
width: 300px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;

position: absolute;
z-index: 1;

.tooltip:hover .tooltiptext {
visibility: visible;


and inserted a test case like so:

<p class="tooltip">Hover over me
<span class="tooltiptext">Here is some information</span>

but it does not work as expected, producing this result (the "hover over me" text should appear in the white space between the title and first sentence):


to make things more confusing, when I look at this section in the editor window after adding the code, it DOES appear as expected:



any help would be appreciated!!!