I'm completely new to javascript, trying to use tooltips to display the image titles on a web page.
The code I've adapted from various examples works as intended on Firefox, but reverses the my & at positions on Google Chrome and does not work at all on IE.
<script>
$(function() {
$( document ).tooltip( { position: {my: 'center bottom+10' , at: 'center top'}});
});
</script>
This is the styling which works fine in Chrome and Firefox, but does not size or show the curved corners in IE
<style type="text/css">
.ui-tooltip-content {
display: inline-block;
background:transparent;
padding:5px;
font: bold 14px "Arial", Sans-Serif;
color: #000080;
}
.ui-tooltip {
padding: 10px 20px;
color:#eee;
border-radius: 20px;
box-shadow: 0 0 7px black;
}
</style>
Library details
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
The page in question is here http://www.millwall-history.org.uk/Season_1982-83.htm
The work around answer is to include the following meta tag
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />
This makes the tool tip function work and also displays the curved borders on tables.
One annoying bug that I can't solve is the my and at positions are reversed in IE & Google from that in firefox!
Did you try the body selector instead of the document selector?
$( body ).tooltip( { position: {my: 'center bottom+10' , at: 'center top'}});
For the border radius you need:
.ui-tooltip {
padding: 10px 20px;
color:#eee;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
box-shadow: 0 0 7px black;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.