tooltips for text in story map

EvanFedorko1 — Wed, 22 Nov 2017 17:21:54 GMT

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

Re: tooltips for text in story map

EvanFedorko1 — Mon, 27 Nov 2017 17:12:09 GMT

I figured this out; the main CSS file for the site is a modified version of bootstrap, so you have to use the bootstrap method for tooltips, which is documented here: Bootstrap Tooltip

topic Re: tooltips for text in story map in Classic Esri Story Maps Questions

tooltips for text in story map

Re: tooltips for text in story map