Tooltip edit for water hazard definition

Hi Hayley,

This is a small MR that edits the water-related hazards definition. Previously, the definition text starting at Examples of water.. was overlapping with the social vulnerability tooltip below it. The only way I was able to work around this was to directly update the style="z-index: 99" directly as inline styles on the html element in text.js. For whatever reason, when I tried to it in .tooltiptext {} scss of NarrativeIntro.vue it wasn't working/updating :/ - maybe you know why that is but otherwise this way works too.

Previous tooltip for water-related hazards definition

Updated tooltip for water-related hazards definition