我正在为自己设计一个网站。当我在每个svg圆圈上悬停或鼠标中心时,我创建了三个svg圆圈,应显示不同的工具提示图像。我试过了,但它不起作用。当我使用push类将所有三种颜色推到屏幕右侧留下一些余量时,我正在使用materialcss框架。
$('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>
这是目前的主屏幕
答案 0 :(得分:0)
我通过CSS创建了自己的自定义工具提示。这项研究花了我一天的时间才完成任务。
.priority-order svg{
float: right;
margin-left: -25px;
}
/*tooltips green color dot*/
a.tooltips {
position: relative;
right: 5px;
float: right;
}
a.tooltips span {
position: absolute;
width: 80px;
color: #FFFFFF;
background: #5FB336;
height: 29px;
line-height: 29px;
text-align: center;
visibility: hidden;
border-radius: 8px;
}
a.tooltips span:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-bottom: 8px solid #5FB336;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 1;
top: 50px;
left: 30%;
margin-left: -57px;
z-index: 999;
cursor: pointer;
}
/*tooltips1 blue color dot*/
a.tooltips1 {
position: relative;
right: 5px;
float: right;
}
a.tooltips1 span {
position: absolute;
width: 80px;
color: #FFFFFF;
background: #3166ff;
height: 29px;
line-height: 29px;
text-align: center;
visibility: hidden;
border-radius: 8px;
}
a.tooltips1 span:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-bottom: 8px solid #3166ff;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltips1 span {
visibility: visible;
opacity: 1;
top: 50px;
left: 30%;
margin-left: -57px;
z-index: 999;
cursor: pointer;
}
/*tooltips1 red color dot*/
a.tooltips2 {
position: relative;
right: 5px;
float: right;
}
a.tooltips2 span {
position: absolute;
width: 80px;
color: #FFFFFF;
background: #f0584f;
height: 29px;
line-height: 29px;
text-align: center;
visibility: hidden;
border-radius: 8px;
}
a.tooltips2 span:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-bottom: 8px solid #f0584f;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltips2 span {
visibility: visible;
opacity: 1;
top: 50px;
left: 30%;
margin-left: -57px;
z-index: 999;
cursor: pointer;
}
&#13;
<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="">
<a class="right tooltips" href="#"><svg height="40" width="100" class="">
<circle cx="30" cy="30" r="10" stroke-width="3" fill="#5fb336" />
<span>Clear</span>
</svg></a>
</div>
<div class="">
<a class="right tooltips1" href="#"><svg height="40" width="100" class="">
<circle cx="30" cy="30" r="10" stroke-width="3" fill="#3166ff" />
<span>Issue</span>
</svg></a>
</div>
<div class="">
<a class="right tooltips2" href="#"><svg height="40" width="100" class="">
<circle cx="30" cy="30" r="10" stroke-width="3" fill="#f0584f" />
<span>Alert</span>
</svg></a>
</div>
</div>
</div>
&#13;