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>

<style>

.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;
}

</style>

and inserted a test case like so:

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

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!!!

Outcomes