2

I want my tooltip message is in black color box as showing the bootstrap documentation but I am getting the default tooltip text. Can anyone suggest what am I doing wrong?

<html><head>
<script data-require="ui-bootstrap@*" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>

<script>

   $("#a").tooltip();

</script>
</head>

<body>
<h1>Hello Plunker!</h1>
<button id="a" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</body>

</html>

I really appreciate if someone tell me the real concept with the solution of my problem. What will I do? Plunker Demo

Thank You.

Khalid Farhan
  • 435
  • 1
  • 3
  • 19
mystertyboy
  • 479
  • 6
  • 13
  • See if this helps http://stackoverflow.com/a/19247955 as I see you are including both jQuery UI and Bootstrap, they both use tooltip, so there possible is a conflict. – Valeklosse Aug 20 '15 at 10:53

3 Answers3

0

Use this code I think this will help you..

HTML:

<button class="btn right" title="" data-placement="right" data-toggle="tooltip" href="#" data-original-title="Tooltip on right">Tooltip on right</button>

Javascript:

$('button').tooltip();

And External Resources are :

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">

<script src="https://code.jquery.com/jquery-2.1.4.min.js">
Amit singh
  • 2,006
  • 1
  • 13
  • 19
0

Instead of writing

<script>

   $("#a").tooltip();

</script>

Replace your script with this one

<script type="text/javascript">
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});
</script>

Here is fiddle

Sid
  • 5,693
  • 3
  • 33
  • 50
0

It seems that you havent include jquery and the required bootstrap javascript file.

The placement of the stylesheets and javascript will be also important. Try to place the bootstrap javascript file and the bootstrap stylesheet file at the end of other stylesheets and javascripts files.

Notice: id is unique! It will be wise to use class or the data-toggle as selector.

$(function() {
  $('[data-toggle="tooltip"]').tooltip()
});
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="script.js"></script>



<h1>Hello Plunker!</h1>
<button id="a" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
nstungcom
  • 347
  • 2
  • 13
  • thanks , sequence of the bootstrap js and css is the real issue using them at the end of other css and js file. now code is working as i expected. – mystertyboy Aug 21 '15 at 05:59
  • @mystertyboy Please note that this method is an override. But if it work for you case then I guess its ok :D You could also exclude tooltip from jquery ui with a custome build or even rename the jquery tooltip namespace. – nstungcom Aug 21 '15 at 20:31
  • rename jquery tooltip namespace and excluding tooltip from jquery. I didnot know this solution. Thanks to guide these thing. It's more interesting way to solve this overriding method issue. Is their anyway which guide me how many function of a js file is override by another js file. – mystertyboy Aug 22 '15 at 16:39