0
我正在为自己设计一个网站。我在每个svg圆上悬停或显示鼠标时都会显示不同的工具提示图像,我创建了三个svg圆。我试过了,但它不起作用。当我使用push class将所有三种颜色推到屏幕的右侧留下一些空白时,我使用了materialcss框架。悬停在svg圈显示每个元素的工具提示
$('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>
这是本主屏幕