当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - After cache refreshing the page bootstrap tooltips is not working

问题描述:

I just created some tooltips via Bootstrap for my web project, but It doesn't work properly. Whenever I cache refresh my page, It stops working. Whenever I go to my Sublime text editor and click Save All, and refresh the page regular, it starts working perfectly. I don't quite understand if it is because of the loading time of the page. Here is my code that takes care of my tooltips:

 $('.reg-joint').each(function(index,element)

{

var jointid = $(element).attr("id");

var jointName = $(element).find('img').attr("alt");

var description = "";

if( typeof joints[index].description !== 'undefined' )

{

description = joints[index].description;

}

$(element).tooltip({

animation:true,

delay:{"show":100,"hide":100},

html:true,

placement:'top',

trigger:'hover',

title:description,

});

$(element).tooltip();

});

I have another issue about these tooltips, whenever it works I got a couple of unexpected arrows pop out.

At the left bottom of the tooltips there is a mini arrow there and I don't know how i am going to get rid of it. I checked my other codes if I had a special character or not but I couldn't find any. Here is my .css codes for that:

 <style>

.tooltip{

position: absolute;

}

.tooltip-inner {

position: relative;

max-width:400px;

background: #ffffff;

border: 3px solid #0CBC99;

color: #0c76a0;

font-size: 20px;

text-align: left;

}

.tooltip-inner:after, .tooltip-inner:before {

top: 100%;

left: 50%;

border: solid transparent;

content: " ";

height: 0;

width: 0;

position: absolute;

pointer-events: none;

}

.tooltip-inner:after {

border-color: rgba(86, 113, 176, 0);

border-top-color: #ffffff;

border-width: 10px;

margin-left: -10px;

}

.tooltip-inner:before {

border-color: rgba(157, 183, 199, 0);

border-top-color: #0CBC99;

border-width: 13px;

margin-left: -13px;

}

</style>

网友答案:
$(element).tooltip(); 

Appears twice, you can see a simple tutorial here: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-tooltips.php

分享给朋友:
您可能感兴趣的文章:
随机阅读: