[英]How can I change image title's CSS?
Here is an example using tootltip http://jsfiddle.net/tg5op333/33/ 这是使用tootltip的示例http://jsfiddle.net/tg5op333/33/
Here is an example using CSS3 http://jsfiddle.net/tg5op333/34/ 这是使用CSS3的示例http://jsfiddle.net/tg5op333/34/
HTML(bootstap tooltip) HTML(bootstap工具提示)
<a href="#" data-toggle="tooltip" data-placement="bottom" data-original-title="test test" class="my-tooltip">Tooltip on bottom
</a>
JS : (bootstap tooltip) JS:(bootstap工具提示)
$(document).ready(function(){
$("a").tooltip();
});
CSS : (bootstap tooltip) CSS:(bootstap工具提示)
.my-tooltip + .tooltip > .tooltip-inner {background-color: #777;}
.my-tooltip + .tooltip > .tooltip-arrow { border-bottom-color:#777; }
HTML (CSS3) HTML(CSS3)
<a href="#" title="test test">Tooltip on bottom
</a>
CSS3 CSS3
a {
color: #900;
text-decoration: none;
}
a:hover {
color: red;
position: relative;
}
a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
CSS 3 is a good method, so I have to preface by saying well done to Matt. CSS 3是一个好方法,因此我必须对Matt表示满意。 That being said, if you want a little less you could use Jquery. 话虽如此,如果您想要少一点,可以使用Jquery。
<script>
$(document).ready(function(){
$('.Notestooltip').hover(
function() {
var tip_title = $(this).attr('title');
$(this).parent('div').append('<div style="position: relative; left: 5px; top: -10px; width: 100px;"><p class="custom_tip">' + tip_title + '</p></div>');
}, function() {
$('.custom_tip').parent('div').remove();
}
);
});
</script>
Here's my css and html. 这是我的CSS和HTML。
<style>
p.custom_tip{
padding: 10px;
background-color: gray;
color: white;
text-shadow: 1px 1px 1px black;
}
</style>
<div><img class="Notestooltip" src="https://suvendugiri.files.wordpress.com/2012/02/checkbox.png" height="15" width="15" title="test test" style=""/></div>
This is completely customizable and lists the title for the specific image and turns itself off. 这是完全可定制的,并列出了特定图像的标题并自行关闭。 Basically just like the CSS 3 for jquery coders. 基本上就像jquery编码器的CSS 3一样。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.