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