Easy HTML Tricks for Blogging: tooltips

Custom Tooltip Style

This sample shows how to change the tooltip style.

Hover Me

	<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>Custom Tooltip Style</h2>
    <p>This sample shows how to change the tooltip style.</p>
    <div style="margin:s0px 0;"></div>
    <div style="padding:10px 200px">
        <div id="pp1" class="easyui-panel" style="width:100px;padding:5px">Hover Me</div>
    </div>
    <div style="padding:10px 200px">
        <div id="pp2" class="easyui-panel" style="width:100px;padding:5px">Hover Me</div>
    </div>
    <script> $(function(){$('#pp1').tooltip({ position: 'right', content: '<span style="color:#fff">This is the tooltip message.</span>', onShow: function(){ $(this).tooltip('tip').css({ backgroundColor: '#666', borderColor: '#666' }); } }); $('#pp2').tooltip({ position: 'bottom', content: '<div style="padding:5px;background:#eee;color:#000">This is the tooltip message.</div>', onShow: function(){ $(this).tooltip('tip').css({ backgroundColor: '#fff000', borderColor: '#ff0000', boxShadow: '1px 1px 3px #292929' }); }, onPosition: function(){ $(this).tooltip('tip').css('left', $(this).offset().left); $(this).tooltip('arrow').css('left', 20); } }); }); </script>

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>

Easy HTML Tricks for Blogging

Using Jeasyui to Create Tooltips (2)

Custom Tooltip Style

Using Jeasyui to Make tooltips

Basic Tooltip

Tooltip Position