jqueryhtmltooltipqtip2

Advanced tooltip with divs

I'm using qTip2 with the 'Dark' theme. I want to customize it to look similar to an MMORPG (Diablo 3).

Is this possible with this plugin? Or is this possible with another tooltip plugin?

Here is the default look which we can target with css to customize it. I am, however, looking for a more advanced look.

Here's the code.

Solution

  • Ok, I did it. With qTip2 it is possible to build an HTML structure and use it in the title.

    For example:

    <div id="my-div" title="<div id='div-title'>Hello World!</div>"></div>

    Of course we can use PHP, so for example it would look like:

    <?php
   $title = 'Hello World';
?>
<div id="my-div" title='<?php echo $title ?>'></div>

    BE AWARE! This plugin needs a single quote or it will break our structure, so when you use a variable in the string you have to do that this way:

    <?php
   $part = 'World';
   $title = 'Hello' . $part . '!';
?>
<div id="my-div" title='<?php echo $title ?>'></div>