Dynamic tooltip_javascript using svg

This article mainly introduces how to use svg to create dynamic tooltip code and production process. It is very meticulous and comprehensive. If you need it, you can refer to it. 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:

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"?>
 
 
  
 

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:

// 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:

ToolTip chat dialog box Creation