Using Jeasyui to Make tooltips ~ Easy HTML Tricks for Blogging

Basic Tooltip

Hover the links to display tooltip message.

The tooltip can use each elements title attribute. Hover me to display tooltip.

Tooltip Position

Click the drop-down list below to change where the tooltip appears.

Select position:

so, this source code of this page showing below

 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
 <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

    <h2>Basic Tooltip</h2>
    <p>Hover the links to display tooltip message.</p>
    <div style="margin:20px 0;"></div>
    <p>The tooltip can use each elements title attribute.
    <a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a> to display tooltip.
    </p>

    <h2>Tooltip Position</h2>
    <p>Click the drop-down list below to change where the tooltip appears.</p>
    <div style="margin:20px 0;"></div>
    <span>Select position:</span>
    <select onchange="changePosition(this.value)">
        <option value="bottom">Bottom</option>
        <option value="top">Top</option>
        <option value="left">Left</option>
        <option value="right">Right</option>
    </select>
    <div style="padding:10px 200px">
    <div id="pp" class="easyui-panel easyui-tooltip" title="This is the tooltip message." style="width:100px;padding:5px">Hover Me</div>
    </div>
    <script type="text/javascript">
        function changePosition(pos){
            $('#pp').tooltip({
                position: pos
            });
        }
    </script>