0
私は自分用のウェブサイトを設計しています。私は3つのsvgサークルを作成しました。それぞれのSVGサークルにマウスカーソルを合わせると、異なるツールチップ画像が表示されます。私は試しましたが、うまくいきません。プッシュクラスを使用して3つの色をすべて画面の右側にプッシュするとき、マージンを残してmaterialcssフレームワークを使用しています。svg circleにカーソルを合わせると、各要素のツールチップが表示されます
$('svg[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom',
html: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="priority-order">
<div class="col l1 m1 s1 push-l9">
<svg height="100" width="100" data-toggle="tooltip" title="<img src='images/4%20projects%202.jpg' style='height:100px;width:100px' />">
<circle cx="50" cy="50" r="10" stroke-width="3" fill="#f0584f" />
</svg>
</div>
<div class="col l1 m1 s1 push-l9">
<svg height="100" width="100">
<circle cx="50" cy="50" r="10" stroke-width="3" fill="#3166ff" />
</svg>
</div>
<div class="col l1 m1 s1 push-l9">
<svg height="100" width="100">
<circle cx="50" cy="50" r="10" stroke-width="3" fill="#5fb336" />
</svg>
</div>
</div>
</div>
これは私がCSSで自分のカスタムツールチップを作成した現在のホームスクリーン