執筆時点で、ツールチップを作成する方法は千通りあります。 css3を介して 、 jsおよびjqueryを使用するか、たとえばアニメーション化されたツールチップを使用します。 しかし、一般的に、これらの長方形のジェネレーターは 、あらゆる種類の疑似要素を通る矢印を使用します。 レビューのために、ツールチップを作成するための別のアプローチを提案したいと思いますが、すでにSVGにあります。 だから、思考の新しい
SVG自体はIEファミリに対する理解が乏しいため、ブラウザ間の互換性に関する問題を解決するために、 ここで読むことができる投稿が作成されました 。
svg editorなどのクールなものがありますが、JS、HTML、SVG、CSSを使用する簡単なものではありません。 そして、多くのおいしいが実現されている最新バージョンでは。
それでは、ツールチップに移りましょう。
最初の例
一見、些細なバランではありませんが、実際には3回クリックするだけで作成されますが、影ではもう少し難しくなりますが、それほどではありません。 影付きのものは2つのオブジェクトを表しており、背景には少しぼかした最初のクローンがあります。
コード
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> <defs> <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_2"> <stop stop-color="#2b2b2b" offset="0"/> <stop stop-color="#a3a3a3" offset="1"/> </linearGradient> <filter id="svg_3_blur"> <feGaussianBlur stdDeviation="1" in="SourceGraphic"/> </filter> <filter id="svg_7_blur"> <feGaussianBlur stdDeviation="1" in="SourceGraphic"/> </filter> </defs> <g> <title> 1</title> <path filter="url(#svg_3_blur)" id="svg_3" d="m205.5,6.5l0,150l-140,0l-45,50l20,-50l-35,0l0,-150l200,0z" stroke-width="2" stroke="#000000" fill="url(#svg_2)"/> <path id="svg_1" d="m202.5,2.5l0,150l-140,0l-45,50l20,-50l-35,0l0,-150l200,0z" stroke-width="2" stroke="#000000" fill="url(#svg_2)"/> </g> <g> <title> 2</title> <path filter="url(#svg_7_blur)" id="svg_7" d="m296.91864,337.6908l-31.93365,1.75967l-8.54471,42.94473l-28.24948,-10.37997l-40.97134,32.94879l-15.60017,-19.22943l-131.38384,82.24933l73.00109,-91.72491l-60.63728,-11.91797l18.97343,-17.74603l-41.62931,-32.55728l29.91727,-7.87863l-9.40605,-42.86328l31.36139,4.49747l25.80284,-39.55603l22.8499,15.43948l52.82199,-23.69279l7.08209,21.47713l63.06906,-0.30273l-10.93362,20.69568l53.29218,23.1875l-25.47705,13.34485l26.59528,39.30444z" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" stroke="#000000" fill="url(#svg_2)"/> <path id="svg_5" d="m229.99786,28.57198l0,0c0,-14.29139 11.31085,-25.87151 25.26352,-25.87151l11.48346,0l0,0l55.12051,0l103.35101,0c6.70038,0 13.12628,2.72472 17.86407,7.574c4.73792,4.8559 7.3996,11.43169 7.3996,18.29751l0,64.67191l0,0l0,38.80714l0,0c0,14.28462 -11.31085,25.87146 -25.26367,25.87146l-103.35101,0l-72.00818,65.77798l16.88766,-65.77798l-11.48346,0c-13.95267,0 -25.26352,-11.58684 -25.26352,-25.87146l0,0l0,-38.80714l0,0z" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" stroke="#000000" fill="url(#svg_2)"/> <path id="svg_6" d="m290.91864,335.6908l-31.93365,1.75967l-8.54471,42.94473l-28.24948,-10.37997l-40.97134,32.94879l-15.60017,-19.22943l-131.38384,82.24933l73.00109,-91.72491l-60.63728,-11.91797l18.97343,-17.74603l-41.62931,-32.55728l29.91727,-7.87863l-9.40605,-42.86328l31.36139,4.49747l25.80284,-39.55603l22.84991,15.43947l52.82198,-23.69278l7.08209,21.47714l63.06906,-0.30273l-10.93362,20.69566l53.29218,23.1875l-25.47705,13.34485l26.59528,39.30444z" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" stroke="#000000" fill="url(#svg_2)"/> <path id="svg_8" d="m368.62555,420.61554c0,-1.45065 1.75122,-2.62485 3.91336,-2.62485c2.15677,0 3.90829,1.17419 3.90829,2.62485c0,1.45062 -1.75153,2.62457 -3.90829,2.62457c-2.16214,0 -3.91336,-1.17395 -3.91336,-2.62457zm8.0173,-18.85013c0,-3.62662 4.37112,-6.56174 9.77332,-6.56174c5.39728,0 9.77344,2.93512 9.77344,6.56174c0,3.62225 -4.37616,6.55692 -9.77344,6.55692c-5.40219,0 -9.77332,-2.93466 -9.77332,-6.55692zm18.56833,-28.58026c0,-10.02161 15.2233,-18.13901 34.01114,-18.13901c18.79276,0 34.01111,8.1174 34.01111,18.13901c0,10.01663 -15.21835,18.134 -34.01111,18.134c-18.78784,0 -34.01114,-8.11737 -34.01114,-18.134zm-29.19119,-82.10022c0,-43.19751 52.13574,-78.18681 116.50241,-78.18681c64.36176,0 116.49762,34.9893 116.49762,78.18681c0,43.19745 -52.13586,78.18692 -116.49762,78.18692c-64.36667,0 -116.50241,-34.98947 -116.50241,-78.18692z" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" stroke="#000000" fill="url(#svg_2)"/> </g> </svg>
デモ
複雑な2番目の例
グラデーションオーバーレイ、グラデーションの境界線、影（複製要素、背景に配置、+ブラーを1に設定）を備えた2つの標準バルーン
コード
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> <defs> <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_2"> <stop stop-color="#000000" offset="0"/> <stop stop-color="#ffffff" offset="1"/> </linearGradient> <linearGradient y2="1" x2="0" y1="0" x1="1" id="svg_3"> <stop stop-color="#000000" offset="0"/> <stop stop-color="#ffffff" offset="1"/> </linearGradient> <linearGradient y2="1" x2="0" y1="0" x1="1" id="svg_4"> <stop stop-color="#000000" offset="0"/> <stop stop-color="#c6c6c6" offset="1"/> </linearGradient> <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_5"> <stop stop-color="#13470c" offset="0"/> <stop stop-color="#ffff00" offset="1"/> </linearGradient> <linearGradient y2="1" x2="0" y1="0" x1="1" id="svg_6"> <stop stop-color="#13470c" offset="0"/> <stop stop-color="#ffff00" offset="1"/> </linearGradient> <linearGradient y2="0" x2="1" y1="1" x1="0" id="svg_8"> <stop stop-color="#000000" offset="0"/> <stop stop-color="#ffffff" offset="1"/> </linearGradient> <linearGradient y2="0" x2="1" y1="1" x1="0" id="svg_9"> <stop stop-color="#2d2d2d" offset="0"/> <stop stop-color="#ffffff" offset="1"/> </linearGradient> <filter id="svg_11_blur"> <feGaussianBlur stdDeviation="1" in="SourceGraphic"/> </filter> <filter id="svg_12_blur"> <feGaussianBlur stdDeviation="1" in="SourceGraphic"/> </filter> </defs> <g> <title> 1</title> <path filter="url(#svg_12_blur)" id="svg_12" stroke-opacity="0.99" d="m92.20741,80.14999c-4.92593,0 -8.89241,3.9664 -8.89241,8.8923l0,118.83849c0,4.9259 3.96648,8.89604 8.89241,8.89604l39.74147,0c-1.64343,1.87819 -2.55142,3.9185 -2.55142,6.06161c0,9.15715 16.46146,16.57161 36.7825,16.57161c20.32091,0 36.7822,-7.41446 36.7822,-16.57161c0,-2.14311 -0.90796,-4.18343 -2.55112,-6.06161l114.92337,0c4.92578,0 8.89227,-3.97014 8.89227,-8.89604l0,-118.83849c0,-4.9259 -3.96649,-8.8923 -8.89227,-8.8923l-223.127,0zm43.65637,160.87736c-11.16757,0 -20.21092,4.3414 -20.21092,9.70087c0,5.36008 9.04335,9.70474 20.21092,9.70474c11.16402,0 20.21086,-4.34467 20.21086,-9.70474c0,-5.35947 -9.04684,-9.70087 -20.21086,-9.70087zm-20.21092,24.25433c-6.25627,0 -11.31822,3.2536 -11.31822,7.27502c0,4.02148 5.06195,7.27502 11.31822,7.27502c6.25278,0 11.31874,-3.25354 11.31874,-7.27502c0,-4.02142 -5.06596,-7.27502 -11.31874,-7.27502zm-19.40176,17.78473c-4.0215,0 -7.27506,1.80859 -7.27506,4.04343c0,2.23126 3.25356,4.04016 7.27506,4.04016c4.01797,0 7.27451,-1.8089 7.27451,-4.04016c0,-2.23483 -3.25655,-4.04343 -7.27451,-4.04343z" stroke-width="2" stroke="url(#svg_3)" fill="url(#svg_6)"/> <path filter="url(#svg_11_blur)" id="svg_11" d="m372.14999,80.1502l34.39606,0l0,0l51.58783,0l120.37991,0l0,80.24705l0,0l0,34.39604l0,22.92863l-120.37991,0l-85.65231,67.42828l34.06448,-67.42828l-34.39606,0l0,-22.92863l0,-34.39604l0,0l0,-80.24705z" stroke-opacity="0.99" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" stroke="url(#svg_9)" fill="url(#svg_6)"/> <path stroke-opacity="0.99" id="svg_1" d="m89.20741,76.14999c-4.92593,0 -8.89241,3.9664 -8.89241,8.8923l0,118.83849c0,4.9259 3.96648,8.89604 8.89241,8.89604l39.74147,0c-1.64345,1.87819 -2.55144,3.9185 -2.55144,6.06161c0,9.15715 16.46147,16.57161 36.78252,16.57161c20.32091,0 36.7822,-7.41446 36.7822,-16.57161c0,-2.14311 -0.90796,-4.18343 -2.55112,-6.06161l114.92337,0c4.92578,0 8.89227,-3.97014 8.89227,-8.89604l0,-118.83849c0,-4.9259 -3.96649,-8.8923 -8.89227,-8.8923l-223.127,0zm43.65637,160.87734c-11.16757,0 -20.21092,4.34142 -20.21092,9.7009c0,5.36005 9.04335,9.70473 20.21092,9.70473c11.16402,0 20.21086,-4.34468 20.21086,-9.70473c0,-5.35948 -9.04684,-9.7009 -20.21086,-9.7009zm-20.21092,24.25435c-6.25627,0 -11.31822,3.2536 -11.31822,7.27502c0,4.02148 5.06195,7.27502 11.31822,7.27502c6.25278,0 11.31874,-3.25354 11.31874,-7.27502c0,-4.02142 -5.06596,-7.27502 -11.31874,-7.27502zm-19.40175,17.78473c-4.0215,0 -7.27507,1.80859 -7.27507,4.04343c0,2.23126 3.25357,4.04016 7.27507,4.04016c4.01796,0 7.27451,-1.8089 7.27451,-4.04016c0,-2.23483 -3.25655,-4.04343 -7.27451,-4.04343z" stroke-width="2" stroke="url(#svg_3)" fill="url(#svg_6)"/> <path id="svg_7" d="m369.14999,77.1502l34.39606,0l0,0l51.58783,0l120.37991,0l0,80.24705l0,0l0,34.39604l0,22.92863l-120.37991,0l-85.65231,67.42828l34.06448,-67.42828l-34.39606,0l0,-22.92863l0,-34.39604l0,0l0,-80.24705z" stroke-opacity="0.99" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" stroke="url(#svg_9)" fill="url(#svg_6)"/> <path id="svg_10" d="m1,1l0.16667,0l0,0l0.25,0l0.58333,0l0,0.38889l0,0l0,0.16667l0,0.11111l-0.58333,0l-0.41505,0.32676l0.16505,-0.32676l-0.16667,0l0,-0.11111l0,-0.16667l0,0z" stroke-opacity="0.99" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" stroke="url(#svg_9)" fill="url(#svg_6)"/> </g> </svg>
デモ
例3
最後の例では、cssと組み合わせた2つの単純なバランを使用しました。
コード
<div class="cont"> <div class="svgshnik"> <svg width="316" height="170" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"> <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> <defs> <filter id="svg_5_blur"> <feGaussianBlur stdDeviation="1"/> </filter> </defs> <g> <title>, , </title> <g filter="url(#svg_5_blur)" opacity="0.75" id="svg_5"> <rect id="svg_1" height="150" width="311" y="2.33333" x="3.33333" stroke="#000000" fill="#606060"/> <path id="svg_3" d="m135.45831,152.33334l8.03149,16l8.09351,-16l-16.125,0z" stroke="#000000" fill="#606060"/> <path id="svg_4" d="m135.58331,149.95834l8.03149,16l8.09351,-16l-16.125,0z" stroke="#606060" fill="#606060"/> </g> <g id="svg_6"> <rect id="svg_7" height="150" width="311" y="2" x="1.66667" stroke="#000000" fill="#606060"/> <path id="svg_8" d="m133.79138,151.99979l8.03149,16l8.09351,-16l-16.125,0z" stroke="#000000" fill="#606060"/> <path id="svg_9" d="m133.91638,149.62479l8.03149,16l8.09351,-16l-16.125,0z" stroke="#606060" fill="#606060"/> </g> </g> </svg> </div> <div class="trash" style="top:0px;left:0px;">, , , , , , , , , , </div> </div> <div class="cont"> <div class="svgshnik" style="top:200px"> <svg width="335" height="170" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="svg_21_blur"> <feGaussianBlur stdDeviation="1" in="SourceGraphic"/> </filter> </defs> <g> <title>, , </title> <g filter="url(#svg_21_blur)" id="svg_21"> <rect id="svg_17" height="150" width="311" y="3.09639" x="3.76306" stroke="#000000" fill="#606060"/> <g id="svg_18" transform="rotate(-90 320.5188293457032,25.477945327758764) "> <path id="svg_19" d="m312.39383,20.00549l8.03149,12.85272l8.09351,-12.85272l-16.125,0z" stroke="#000000" fill="#606060"/> <path id="svg_20" d="m312.51883,18.09768l8.03149,12.85271l8.09351,-12.85271l-16.125,0z" stroke="#606060" fill="#606060"/> </g> </g> <g id="svg_22"> <rect id="svg_23" height="150" width="311" y="2.09639" x="1.76306" stroke="#000000" fill="#606060"/> <g id="svg_24" transform="rotate(-90 318.5188293457032,24.4779357910156) "> <path id="svg_25" d="m310.39383,19.00549l8.03149,12.85271l8.09354,-12.85271l-16.12503,0z" stroke="#000000" fill="#606060"/> <path id="svg_26" d="m310.51883,17.09768l8.03149,12.85271l8.09354,-12.85271l-16.12503,0z" stroke="#606060" fill="#606060"/> </g> </g> </g> </svg> </div> <div class="trash" style="top:200px; left:0px;">, , , , , , , , , , </div> </div> <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> <defs> <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_2"> <stop stop-color="#2b2b2b" offset="0"/> <stop stop-color="#a3a3a3" offset="1"/> </linearGradient> <filter id="svg_3_blur"> <feGaussianBlur stdDeviation="1" in="SourceGraphic"/> </filter> </defs> <g> <title> 1</title> <path filter="url(#svg_3_blur)" id="svg_3" d="m205.5,6.5l0,150l-140,0l-45,50l20,-50l-35,0l0,-150l200,0z" stroke-width="2" stroke="#000000" fill="url(#svg_2)"/> <path id="svg_1" d="m202.5,2.5l0,150l-140,0l-45,50l20,-50l-35,0l0,-150l200,0z" stroke-width="2" stroke="#000000" fill="url(#svg_2)"/> </g>
ここにCSSコードがあります：
css
.cont{ position:relative; top:0px; left:0px; } .svgshnik{ position: absolute; top:0px; left:0px; z-index:10; } .trash{ position:absolute; padding:5px 0 0 5px; z-index:15; width:300px; color:white; }
デモ
だから私たちが持っているもの：
- 役立つオンラインSVGエディター
- スケーラビリティの問題を気にしないベクターのツールチップ
- 行われた仕事の満足度
要約すると、SVGのツールチップは万能薬とはほど遠いものですが、住む場所があるオプションの1つにすぎません。