straight in, embed the following code in the page:
<div class= "Promotion" > <code data-toggle= "tooltip" data-placement= "bottom" title= "I Love You" > Cheer </code> </div>
In body, the above code is inserted under the same tag as follows:
<script type= "Text/javascript" > $ (Function () {$ (document). tooltip (); }); </script>
Completed in general. Note the introduction of the HTML header:
Jquery-ui-1.10.3.custom.css
Jquery-ui-1.10.3.custom.js
If you want to modify the pop-up style, open jquery-ui-1.10.3.custom.css to find the ToolTip
See the following code, the following CSS modification can modify the pop-up layer style, come to try it ~
/* JQuery UI Tooltip 1.10.3 * * Copyright, AUTHORS.txt (http://jqueryui.com/about) * Dual licensed under the MIT or GPL Version 2 licenses. * Http://jquery.org/license * * http://jqueryui.com/tooltip/*/.ui-tooltip { display:block; font-size:11px; opacity:0.8; Position:absolute; visibility:visible; z-index:1024; max-width:200px;}. Ui-tooltip { background:white; border:1px solid #000000;}. Ui-tooltip { color: #000000; PADDING:3PX 8px; Text-align:center; text-decoration:none;/* -webkit-box-shadow:inset 0 1px 0 #000000;/* Safari 4 *//* -moz-box-shadow:inset 0 1p x 0 #000000; /* Firefox 3.6 *//* box-shadow:inset 0 1px 0 #000000; */ border-radius:4px 4px 4px 4px;} Body. Ui-tooltip {border-width:1px;border-color:orange;}
The following section of code is from the network, more directly directly into the W3cschool experiment:
<!doctype html> JQuery UI tooltip Popup style modified