Tooltip Content
Tooltip Content
"Your Image Title" - by You
Tooltip Content
Vestibulum vitae orci orci. Sed ullamcorper tempor tellus metus.
Vestibulum vitae orci orci. Sed ullamcorper tempor tellus metus.
Vestibulum vitae orci orci. Sed ullamcorper tempor tellus metus.
Vestibulum vitae orci orci. Sed ullamcorper tempor tellus metus.
Vestibulum vitae orci orci. Sed ullamcorper tempor tellus metus.
view docs
Tooltip Shortcodes
Tooltips are a great way to provide popout tips for your readers. You can change the colors, sizes, and alignment with our tooltips.
Inside your content
Suspendisse viverra sagittis lectus et dignissim? Nunc tempor Tooltip Trigger faucibus orci id elementum. Fusce odio tellus, malesuada Tooltip Trigger sit amet rhoncus non, lacinia sed enim. Aenean ac neque justo, sit amet blandit augue.
[tooltip position = "top" trigger="Tooltip Trigger"]Tooltip Content[/tooltip]
Image trigger & images within the tooltips
[tooltip sticky="true" custom_id="image2" bgColor="#000" width="400" position="top" trigger='<img width="80%" alt="" src="http://yourwebsite.com/yourimage.jpg" class="framed">']
<a href="http://yourwebsite.com/your-big-image.jpg" rel="prettyPhoto"><img alt="" src='http://yourwebsite.com/your-small-image.jpg' /></a>
<a href="http://yourwebsite.com/your-big-image.jpg" rel="prettyPhoto"><img alt="" src='http://yourwebsite.com/your-small-image.jpg' /></a>
<a href="http://yourwebsite.com/your-big-image.jpg" rel="prettyPhoto"><img alt="" src='http://yourwebsite.com/your-small-image.jpg' /></a>
<a href="http://yourwebsite.com/your-big-image.jpg" rel="prettyPhoto"><img alt="" src='http://yourwebsite.com/your-small-image.jpg' /></a>
<a href="http://yourwebsite.com/your-big-image.jpg" rel="prettyPhoto"><img alt="" src='http://yourwebsite.com/your-small-image.jpg' /></a>
<a href="http://yourwebsite.com/your-big-image.jpg" rel="prettyPhoto"><img alt="" src='http://yourwebsite.com/your-small-image.jpg' /></a>
[/tooltip]
Image with a simple text tooltip
[tooltip custom_id="image1" width="250" position="right" trigger='<img alt="" src="http://yourwebsite.com/yourimage.jpg" class="framed">']
"Your Image Title" - by You
[/tooltip]
Image with a video tooltip
[tooltip sticky="true" custom_id="image3" bgColor="#000" width="440" position="right" trigger='<img alt="" src="http://yourwebsite.com/yourimage.jpg" class="framed">']
<iframe src="http://player.vimeo.com/video/18554749" width="400" height="225" frameborder="0"></iframe>
[/tooltip]
Used with buttons and links
Download
Download
Download
Download
[tooltip width="300" position = "top" custom_id = "button1" trigger='<a class="button_link large_button" href="#"><span>Download</span></a>']
<ul class="fancy_list" style="margin:0;">
<li class="check_list silver_sprite">Scelerisque aliquet lorem orci.</li>
<li class="check_list silver_sprite">Convallis odio est.</li>
<li class="check_list silver_sprite">Dolor sit amet dignissim convallis.</li>
<li class="check_list silver_sprite">Nullam dignissim convallis.</li>
</ul>
[/tooltip]
[tooltip width="300" position = "right" custom_id = "button2" trigger='<a class="button_link medium_button" href="#"><span>Download</span></a>']
<ul class="fancy_list" style="margin:0;">
<li class="check_list silver_sprite">Scelerisque aliquet lorem orci.</li>
<li class="check_list silver_sprite">Convallis odio est.</li>
<li class="check_list silver_sprite">Dolor sit amet dignissim convallis.</li>
<li class="check_list silver_sprite">Nullam dignissim convallis.</li>
</ul>
[/tooltip]
[tooltip width="300" position = "bottom" custom_id = "button3" trigger='<a class="button_link small_button" href="#"><span>Download</span></a>']
<ul class="fancy_list" style="margin:0;">
<li class="check_list silver_sprite">Scelerisque aliquet lorem orci.</li>
<li class="check_list silver_sprite">Convallis odio est.</li>
<li class="check_list silver_sprite">Dolor sit amet dignissim convallis.</li>
<li class="check_list silver_sprite">Nullam dignissim convallis.</li>
</ul>
[/tooltip]
[margin20]
[tooltip custom_id = "download1" trigger='<a class="download_link" href="#">Download</a>']Tooltip Content[/tooltip]
Various Options
[tooltip trigger="Tooltip Trigger Text" width="200px" sticky="true"]
Vestibulum vitae orci orci. Sed ullamcorper tempor tellus metus.
[/tooltip]
[tooltip trigger="Tooltip Trigger Text" width="200px" bgColor="#089"]
Vestibulum vitae orci orci. Sed ullamcorper tempor tellus metus.
[/tooltip]
[tooltip trigger="Tooltip Trigger Text" width="200px" position="top" close="true"]
Vestibulum vitae orci orci. Sed ullamcorper tempor tellus metus.
[/tooltip]
[tooltip trigger="Tooltip Trigger Text" width="200px" position="bottom" variation="blue"]
Vestibulum vitae orci orci. Sed ullamcorper tempor tellus metus.
[/tooltip]
[tooltip trigger="Tooltip Trigger Text" width="200px" position="top" variation="blue" arrow="false"]
Vestibulum vitae orci orci. Sed ullamcorper tempor tellus metus.
[/tooltip]
