Using Jeasyui to Create Tooltips (2) ~ Easy HTML Tricks for Blogging

Custom Tooltip Style

This sample shows how to change the tooltip style.

Hover Me

the 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>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>