我在Boostrap网站上使用Tooltipster插件。我在页面上的两个不同位置紧挨着工具提示。在本地和通过emailonacid.com进行测试时,两个工具提示都会按预期显示。但是,在IE9 / IE8中,只显示右侧的那个。左边的那个似乎消失了。
我查看了官方的Tooltipster FAQ和论坛,以前的版本似乎在IE9中存在问题,但显然不再存在。我很难过。这是一个jsfiddle(道歉,如果它不够信息,我以前从未使用过):
https://jsfiddle.net/st7zx58r/
感谢您提供的任何帮助!
$(document).ready(function() {
$('.tooltip').tooltipster({
animation : 'grow',
content: $('<span><strong>Includes:</strong><br />• Online Ads<br />• Online Trade Publications<br />• Social Media Advertising<br />• Email Blasts<br />• Print Publications<br />• Direct Mailer<br />• Web Videos<br />• SEM/SEO<br />• Other</span>'),
contentAsHTML: true,
interactive: true,
});
});
$(document).ready(function() {
$('.tooltip2').tooltipster({
animation : 'grow',
content: $('<span><strong>TESTING:</strong><br />• Online Ads<br />• Online Trade Publications<br />• Social Media Advertising<br />• Email Blasts<br />• Print Publications<br />• Direct Mailer<br />• Web Videos<br />• SEM/SEO<br />• Other</span>'),
contentAsHTML: true,
interactive: true,
});
});
.form-text {
text-align: left;
font-family: 'LincolnProximaNova-Bold', Arial, sans-serif;
font-size: 14px;
line-height: 17px;
color: #53565a;
margin-left:15px;
}
.radiobtn1 {
text-align: left;
font-family: 'LincolnProximaNova', Arial, sans-serif;
font-size: 14px;
color: #b45f1a;
margin-top: 20px;
margin-bottom: 10px;
}
.radiobtn1 a{
text-align: left;
font-family: 'LincolnProximaNova', Arial, sans-serif;
font-size: 14px;
color: #b45f1a;
margin-top: 20px;
margin-bottom: 10px;
}
.radiobtn1 ul{
text-align:center;
}
.radiobtn1 li{
list-style: none;
display: inline;
padding-left:30px;
}
<script src="http://designumber18.com/wedding/jquery.tooltipster.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row form-text">
<p>Please select the category for this claim.</p>
</div>
<div class="row radiobtn1">
<ul>
<li><input type="radio" name="media"><label for="qualified"> Advertising (Digital/Print)</label><span id="stayTool" class="tooltipstered"> <img src="images/question-mark.png" style="cursor: pointer;" class="tooltip" ></span></li>
<li><input type="radio" name="media"><label for="qualified"> Experiential Event</label><span id="stayTool" class="tooltipstered"> <img src="images/question-mark.png" style="cursor: pointer;" class="tooltip2" ></span></li>
</ul>
</div>