<
# Advanced Tooltips
This example shows different ways to add information to a [SBOL Visual
CSS](../index.html) schema by using tooltips triggered on hovering or clicking elements.
The fancy tooltips are provided by the [Opentip](http://www.opentip.org/) library
## Try it !
<div class="sbol-visual centered">
<div class="sbolv protease-site"
title="I'm a protease site !">
Simple tooltip<br />(hover me !)
</div>
<div class="sbolv promoter"
data-ot="Promoter P1 (E. <em>coli</em>)"
data-ot-target="true"
data-ot-fixed="true"
data-ot-tip-joint="bottom left">
Custom tooltip<br />(hover me !)
</div>
<div class="sbolv terminator"
data-ot="
<b>Double terminator</b><br />
<img src='http://parts.igem.org/wiki/images/e/e2/Mfold-B0015-1.png'
style='width:120px;height:50px'/><br />
Source:<a href='http://parts.igem.org/Part:BBa_B0015'>iGEM<a>
"
data-ot-fixed="true" data-ot-tip-joint="bottom left"
data-ot-show-on="click" data-ot-hide-trigger="closeButton"
data-ot-close-button-cross-color="#000" data-ot-target="true"
data-ot-background="#fff" data-ot-border-color="#bbb">
Fancy tooltip<br />(click me !)
</div>
</div>
## Code for this example
```
<div class="sbol-visual centered">
<div class="sbolv protease-site"
title="I'm a protease site !">
Simple tooltip<br />(hover me !)
</div>
<div class="sbolv promoter"
data-ot="Promoter P1 (E. <em>coli</em>)"
data-ot-target="true"
data-ot-fixed="true"
data-ot-tip-joint="bottom left">
Custom tooltip<br />(hover me !)
</div>
<div class="sbolv terminator"
data-ot-fixed="true"
data-ot-tip-joint="bottom left"
data-ot-show-on="click"
data-ot-hide-trigger="closeButton"
data-ot-close-button-cross-color="#000"
data-ot-target="true"
data-ot-background="#fff"
data-ot-border-color="#bbb"
data-ot="
<b>Double terminator</b><br />
<img src=
'http://parts.igem.org/wiki/images/e/e2/Mfold-B0015-1.png'
style='width:120px;height:50px'/><br />
Source:<a href='http://parts.igem.org/Part:BBa_B0015'>iGEM<a>
">
Fancy tooltip<br />(click me !)
</div>
</div>
```
]]>