Bootstrap tooltip issue

Question!

Whatever I do my tooltip just shows beneath the relevant link.

I have the following style in my head:

<style>
/* Tooltip on top */
.test + .tooltip.top > .tooltip-arrow {
    border-top: 5px solid green;
}
</style>

Within the body I have:

<a class="test" href="#" data-toggle="tooltip" data-placement="top" title="ROUND">R</a>

At the bottom of everything I have:

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

I was trying to use the guide from:

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_tooltip_css&stacked=h

Any hints or tips would be great :)



Answers

You have to use the container option of tooltip with the body value :

 <button type="button" class="btn btn-default" data-container="body" data-toggle="tooltip" data-placement="left" title="Tooltip on left" >Tooltip on left</button>

Take a look at the options array in the official doc : http://getbootstrap.com/javascript/#tooltips

By : ArGh


"Yo dawg, I heard you like Request, cos' you put a Request inside a Request" XD

I'd do it like this:

from rest_framework.test import APIClient

client = APIClient()
response = client.post('/', {'github': 'payload'}, format='json')
self.assertEqual(response.data, {'github': 'payload'})
# ...or assert something was called, etc.

Hope this helps



You can get first character, insert it with a different font color and then add rest of the content:

var span = $('.design span');
var html = span.html();

span.html("<span style='color:red;'>"+ html.charAt(0)  +"</span>" + html.substring(1,html.length));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="design">DESIGNED BY <span>Teodor Victor</span></span>

By : Marcin C.


This video can help you solving your question :)
By: admin