title

Title

by Imri Paloja

HTML

<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        <div id="cite1">
            <sup>[<a href="#cite1">1</a>]
                
                <div id="popup1">
                        <p>
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Google Trends: <a target="_blank" href="http://www.google.com/trends/explore#q=nagios,%20icinga&amp;date=today%2012-m&amp;cmpt=q">Nagios, Icinga </a> 
                        </p>
                    </div>
            </sup>.
         </div>

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>




<br><br><br><br>
<br><br><br><br>

    
    <ul>
    <li class="cite">
      <a target="_blank" href="http://www.google.com/trends/explore#q=nagios,%20icinga&amp;date=today%2012-m&amp;cmpt=q">Google Trends: Nagios, Icinga </a>
    </li>
    </ul>

CSS

#cite1 {
    height: 16px;
    margin: 0;
    padding: 0;
    width: 15px;
}

#popup1 {
    visibility: hidden;
    display: none;
}

#popup1 p {
    margin: 0px;
    padding: 0px;
}

#popup1 footer {
    float: right;
}

#cite1:hover #popup1 {
    background-color: #FFFFFF;
    border: 2px solid #454545;
    bottom: auto;
    box-shadow: 2px 4px 2px rgba(0, 0, 0, 0.3);
    display: block;
    left: auto;
    overflow: hidden;
    padding: 5px;
    position: absolute;
    right: auto;
    top: auto;
    transition: ease 500ms ease-in 0s;
    visibility: visible;
    word-wrap: break-word;
    max-width: 250px;
    text-decoration: none;
}