Home > Developer > Web Develop
How to make jquery simple plain text cue bar, first introduced the cue bar (tooltip) means that the user mouse hover over the event prompted by the title. They are already present in most browsers, and when you can provide a link or a picture with the title property, that is, the user hovers over the element, the browser usually displays it as a cue bar, and the text store uses the data command to clear and replace the link title. The cue bar not only supports text header content, but also supports Picture button blank box controls. So I learned a little bit of his code from a foreign author's technical blog http://www.alessioatzeni.com/blog/simple-tooltip-with-jquery-only-text/, and then designed his own style.
Theory of Logic
1. Grabbing headers
We first grab its title from the link and turn it into text to pop up as a cue bar. We need to remove the default title from the link, in order to avoid a conflict between the default caption prompt and our custom cue bar, use the data command with the text store, and then clear and replace the link title.
2. Mouse over Events
Create new paragraph elements with the class class of ToolTip, we can set the cue bar content in the next way. Add sub-sections to the page after the appendto (' body ') is written, and customize the animated properties of the Fadein.
3. Mouse Leave Event
Very simple, restore the title of the properties, clear the cue bar.
4. Mouse over Events
It is important that when we need to obtain the x-axis and y-axis coordinates to locate the correct cue bar, the cue bar follows the mouse.
You can use a custom ToolTip instead of the default title value of the label to freely and subtly design the style and animation of the cue bar.
? 1. Code
<body>
<div class= "Container" >
<div class= "Container" >
<p><a href= "#" title= "Did you see the gray cue bar?" "class=" Mastertooltip "> Blue balls in the world </a></p>
<p title= "The story between me and the egg is very interesting. "class=" Mastertooltip "> I and the egg is the last July to know, very interesting, we are netizens, eggs in group chat to see the woman's name, think that the name is too simple, and clearly indicated that she is already a woman, Curiosity added me. We talked very well, a bit of the feeling of devotion, the egg said wait until the inevitable, I will go to see you. Haha, I am very happy, but there is a feeling of seeing him immediately. Ask him out to see the truth! No, I'm not updating it. The woman drank too much yesterday! Because of the feelings, read a lot about the love of the post, I feel very sorry for the eggs. Because can not give him happiness and a small family. I love him, love very much. </p>
<H2 title= "This is the main title! "class=" Mastertooltip "> Mouse over this title (with cue bar) <p title= "This is the subtitle! "class=" Mastertooltip "> The story between me and the balls, little title </p>
<button type= "button" class= "Mastertooltip" title= "click [Confirm] button, of course just dead button, will not surprise you" > confirmation </button>
<input type= "text" placeholder= "Your Name" class= "Mastertooltip" title= "Please enter your favorite name"/>
</div>
</body>
2. Code
body{
Background: #FF7B3A;
Font:bold 12px Arial, Helvetica, Sans-serif;
margin:0;
padding:0;
min-width:960px;
Color: #666;
}
A
Text-decoration:none;
Color: #4979C2;
}
H1 {
Font:4em normal Arial, Helvetica,microsoft Jhenghei, Sans-serif;
padding:0; margin:0;
Text-align:center;
Color: #ccc;
}
H1 small{
font:14px normal Arial, Helvetica, Microsoft Jhenghei, Sans-serif;
Text-transform:uppercase; Letter-spacing:0.2em; Line-height:5em;
Display:block;
}
H2 {
font-weight:700;
Color: #fff;
font-size:20px;
Font:normal Arial, Helvetica, Microsoft Jhenghei, Sans-serif;
}http://www.huiyi8.com/huanbao/?
H2, p {Green mark
margin-bottom:-1px;
}
. container {width:960px; margin:0 auto; overflow:hidden; height:910px;}
IMG {
BORDER:6PX solid #fff;
}
. tooltip {
Display:none;
Position:absolute;
border:0px solid #333;
Background-color: #ccc;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
-webkit-box-shadow: #000 1px 5px 20px;
-moz-box-shadow: #000 1px 5px 20px;
Box-shadow: #000 1px 5px 20px;
padding:10px;
Color: #C94338;
font-size:12px;
}
3. [Code] Remember to refer to the jquery library at the top or bottom of PHP
<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" ></ Script>
4. Code
$ (document). Ready (function () {
Plain text Cue bar
$ ('. Mastertooltip '). Hover (function () {
Mouse hover over Event
var title = $ (This). attr (' title ');
$ (this). Data (' TipText ', title). Removeattr (' title ');
$ (' <p class= ' tooltip ></p> ')
. Text (title)
. AppendTo (' body ')
. FadeIn (' slow ');
}, function () {
Mouse hover off Event
$ (this). attr (' title ', $ (this). Data (' TipText '));
$ ('. ToolTip '). Remove ();
}). MouseMove (function (e) {
var mousex = E.pagex + 20; Get x-axis coordinates
var mousey = E.pagey + 10; Get y-Axis coordinates
$ ('. ToolTip ')
. css ({top:mousey, left:mousex})
});
});
?
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
