Check out the code on this Fiddle link,
<!DOCTYPE html>
<body>
<div class="test">
<h1>?</h1>
<p>This paragraph gives more information that can be accessed by hovering over the question mark (Move your mouse away to shrink back.)</p>
</div>
<h1>Examples</h1>
<br />
<h3>My name is Shaun</h3>
<div class="test">
<h1>?</h1>
<p>Individuals with this name are often passionate, compassionate, intuitive, and have magnetic personalities. They tend to be humanitarian, broadminded, and generous, often choosing professions where they can serve humanity. They are affectionate and giving, may be easily hurt, and are sometimes quick-tempered.</p>
</div>
<h3>I am on a see food diet</h3>
<div class="test">
<h1>?</h1>
<p>When I see food, I want to eat it.</p>
</div>
</body>
There are two issues I would like to address:
- When hovering over the question marks, you can see that as the div expands, the text constantly reformats to fit inside it. I want the text to already be at the correct size based on the fully expanded DIV.
- How can I dynamically choose the size of the DIV so that its maximum expanded size is based on the text within it? I tried using 100%, but that just sizes it to the webpage.