Home > Developer > JavaScript
ToolTip (Dynamic dialog box made using svg), tooltipsvg
Last night, I saw how to use svg to create dynamic tooltip. So today I learned how to use it. So I also made it and understood the principles and gained a lot! Next we will learn more about svg, which is a good thing.
This also pays attention to some of the details that are often tangled, such:
<Article>
<Section id = "sound1">
</Section>
<Section id = "sound2">
</Section>
</Article>
The length of the article label is 600px, and the section is 300px respectively. Set it to display: inline-block, and then the following effect is displayed:
In general sense, the portrait picture should be arranged horizontally, because the display: inline-block will render the blank spaces and spaces between the article label and the section label, therefore, the image is not in the same row. The solution is to add the following css code to the article and section labels:
Article {
Width: 600px;
Margin: 200px;
Font-size: 0;
}
Article section {
Display: inline-block;
Width: 300px;
Font-size: 14px;
Position: relative;
}
So the blank space is removed!
In addition, for svg web images, we can modify them so that their image styles can be modified. The format is roughly as follows (for example ):
<? Xml version = "1.0" encoding = "UTF-8"?>
<! -- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In. SVG Version: 6.00 Build 0) -->
<! DOCTYPE svg PUBLIC "-// W3C // dtd svg 1.1 // EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<Svg version = "1.1" id = "Layer_1" xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink" x = "0px" y = "0px"
Width = "600px" height = "300px" viewBox = "0 0 600 300" enable-background = "new 0 0 600 300" xml: space = "preserve">
<Polygon points = "89.571, 6.648 513.333 6.648, 590.25 75.342, 553.002 215.306, 313.065 273.358, 300,293.352, 288.876
48.936, 215.306 9.75, 75.342 "/>
</Svg>
So we cannot introduce it into html files. If there are many such svg images, it is very troublesome to modify them!
So ajax is used to load the image:
Html dom: <svg data-src = "bubble1.svg" width = "280" height = "140"> </svg>
// Question 2: How can we introduce svg images? It is impossible to introduce the whole svg, which is not easy to modify and edit.
// Tip 2: Use js for loading
$ ('Svg [data-src] '). each (function (index, svg ){
Var src = $ (svg). data ('src'); // data is used to obtain the path of the data-* attribute.
$. Ajax ({
Url: src,
DataType: 'xml ',
Success: function (content ){
Var doc = content.doc umentElement;
$ (Doc). attr ({
Width: $ (svg). attr ('width '),
Height: $ (svg). attr ('height ')
});
$ (Svg). after (doc). remove ();
}
})
});
There is also a good way to show the animation effect of images, just for svg images:
Use stroke-dasharray (virtual line stroke, you can constantly try to adjust it to adapt to the size, to achieve the effect of the entire stroke) stroke-dashoffset (dotted line interval, to the effect that the whole svg has no stroke), and then use transition to implement this animation.
Final effect (there is no online demonstration, and the animation effect can be merged, but the following code is copied directly, and you can use it by downloading two svg images and portraits)
The Code is as follows:
<! DOCTYPE html>
<Html lang = "zh-cn">
<Head>
<Title> toolTip chat dialog box creation </title>
<Meta charset = "UTF-8"/>
<Meta name = "keywords" content = ""/>
<Meta name = "description" content = ""/>
<Script type = "text/javascript" src = "jquery. js"> </script>
<Style type = "text/css">
H1 {
Color: red;
Font-size: 18px;
}
Article {
Width: 600px;
Margin: 200px;
Font-size: 0;
}
Article section {
/* Question 1: For display: inline-block, two sections cannot be arranged side by side. Because this attribute is used, the blank spaces between articles and sections are rendered as spaces, so it cannot be side by side */
/* Tip 1: Set the font-size of the parent element to 0. Clear the blank space */
Display: inline-block;
Width: 300px;
Font-size: 14px;
Position: relative;
}
. Text-center {
Text-align: center;
}
# Sound1, # sound2 {
Cursor: pointer;
}
# Sound1 img, # sound2 img {
Width: 100px;
Height: 100px;
Border-radius: 100%;
}
. Sound_1,. sound_2 {
Position: absolute;
Top:-pixel PX;
Width: 200px;
Height: 100px;
Box-sizing: border-box;
Opacity: 1;
}
. Sound_2 {
Padding: 28px;
}
. Sound_1 {
Padding: 25px 68px 25px 30px;
Left:-150px;
Top:-134px;
Width: 280px;
Height: 140px;
}
. Sound_1 svg,. sound_2 svg {
Position: absolute;
Top: 0;
Left: 0;
}
. Sound_1 p,. sound_2 p {
Position: relative;
Margin: 0;
Color: #444;
Font-size: 12px;
}
. Sound_1 svg path,. sound_2 svg polygon {
Fill: # fff;/* fill color */
Stroke: red;/* stroke color */
Stroke-width: 6px;/* edge width */
}
. Sound_1 svg # path1 {
Transform: scale (0, 0 );
Transform-origin: center;
Opacity: 0;
Transition-duration:. 3 s;
Transition-delay: 0;
}
. Sound_1 svg # path2 {
Transform: scale (0, 0 );
Transform-origin: center;
Opacity: 0;
Transition-duration:. 3 s;
Transition-delay:. 1 s;
}
. Sound_1 svg # path3 {
Transform: scale (0, 0 );
Transform-origin: center;
Opacity: 0;
Transition-duration:. 3 s;
Transition-delay:. 2 s;
}
. Sound_1 svg # path4 {
Transform: scale (0, 0 );
Transform-origin: center;
Opacity: 0;
Transition-duration:. 3 s;
Transition-delay:. 25 s;
}
. Sound_1 p {
Transition:. 2 s. 35 s;
Opacity: 0;
Transform: translate (0,-10px );
}
# Sound1: hover. sound_1 svg # path1, # sound1: hover. sound_1 svg # path2, # sound1: hover. sound_1 svg # path3, # sound1: hover. sound_1 svg # path4 {
Transform: scale (1, 1 );
Opacity: 1;
Transition-delay: 0;
}
# Sound1: hover. sound_1 p {
Opacity: 1;
Transform: translate (0, 0 );
}
/* Question 3: How can I use a good method to show the animation effect of an image? Only for svg images */
/* Tip 3: Use stroke-dasharray (virtual line stroke, you can keep trying to adjust it to adapt to the size, to achieve the stroke effect) stroke-dashoffset (dotted line interval, to the effect that the whole svg has no stroke), and then use transition to implement this animation */
. Sound_2 svg polygon {
Stroke-dasharray: 1500;
Stroke-dashoffset: 1500;
Fill-opacity: 0;
Transition:. 6 s;
}
. Sound_2 p {
Transition:. 4 s;
Transform: scale (-0.5 );
Opacity: 0;
Transform: translate (0,-10px );
}
# Sound2: hover. sound_2 svg polygon {
Stroke-dashoffset: 0;
Fill-opacity: 1;
}
# Sound2: hover. sound_2 p {
Transform: scale (0 );
Opacity: 1;
Transform: translate (0, 0 );
}
</Style>
</Head>
<Body>
<H1> toolTip chat dialog box creation
<Article>
<Section id = "sound1">
<Div class = "text-center"> </div>
<P class = "text-center"> South Korea zhengtai </p>
<Div class = "sound_1">
<Svg data-src = "bubble1.svg" width = "280" height = "140"> </svg>
<P> I heard that the fitting room of Uniqlo has been fully upgraded, the space size has been doubled, and the room has been decorated. At the same time, there are mirrors on all sides to facilitate the video without dead corners. Have a try, beautiful girl! </P>
</Div>
</Section>
<Section id = "sound2">
<Div class = "text-center"> </div>
<P class = "text-center"> Uniqlo beauty </p>
<Div class = "sound_2">
<Svg data-src = "bubble2.svg" width = "200" height = "100"> </svg>
<P> it sounds very exciting. Let's go, handsome guy, preparation guy, go! </P>
</Div>
</Section>
</Article>
<Script type = "text/javascript">
$ (Document). ready (function (){
// Question 2: How can we introduce svg images? It is impossible to introduce the whole svg, which is not easy to modify and edit.
// Tip 2: Use js for loading
$ ('Svg [data-src] '). each (function (index, svg ){
Var src = $ (svg). data ('src'); // data is used to obtain the path of the data-* attribute.
$. Ajax ({
Url: src,
DataType: 'xml ',
Success: function (content ){
Var doc = content.doc umentElement;
$ (Doc). attr ({
Width: $ (svg). attr ('width '),
Height: $ (svg). attr ('height ')
});
$ (Svg). after (doc). remove ();
}
})
});
})
</Script>
</Body>
</Html>
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
