Issue with positioning Bootstrap tooltip on the right side causing it to not display correctly

Currently, the tooltip I have is functioning properly:

However, my main requirement is to align it to the right. So, when I use .pull-right, it appears like this:

This is the HTML code snippet:

<div class="wrapper">Login
    <span rel="tooltip" 
    data-toggle="tooltip" 
    data-trigger="hover" 
    data-placement="right" 
    data-html="true"
    data-title="Aenean nibh neque, mattis id diam non, placerat imperdiet urna.">
    <span class="glyphicon glyphicon-info-sign pull-right" aria-hidden="true"></span>
    </span>
</div>

and here is the tooltip function call: 

$('[rel="tooltip"]').tooltip();

Could anyone offer assistance with this? Thank you.

jqueryhtmlcsstwitter-bootstrap

Answer №1

Remember, always grab the wrapper, not the tooltip itself.

<div class="wrapper pull-right">Sign Up
    <span rel="tooltip" 
    data-toggle="tooltip" 
    data-trigger="hover" 
    data-placement="right" 
    data-html="true"
    data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
    <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
    </span>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible for Jquery to directly retrieve the form input without the need for a SET button in the script?

I have a script that functions as a basic countdown. All you need to do is enter a number, press the SET button, and click START for the countdown to begin. Although I primarily use this script in the gym, I often forget to hit the SET button after enteri ...

javascriptjquery

How to display a "data not available" notification in AngularJS ngTable plugin tables when the data response array is void of content

I need to implement a no data message in my ngTable table when the response data array is empty. Currently, I have the following code: <tr ng-repeat="row in $data"> <td data-title="'name'" filter="{name: 'text& ...

javascriptangularjscsshtml-tablengtable

Leveraging PHP's PDO with MySQL in combination with the power of JQuery

Hey there, I'm dealing with a login form that includes fields for both username and password. I have a PHP backend script that properly processes the data and encodes the response in JSON format. However, my JQuery JS script utilizing Ajax doesn&apo ...

phpjquerymysqlajaxpdo

Fetching JSON data with CodeIgniter

Struggling to fetch JSON data from my PHP file. It's been quite challenging. Here is the code snippet: The code in my VIEW: var productDetails = {'id':ISBNNumber,'qty':finalqty,'price':finalprice,'name':bookTi ...

phpjqueryajaxjsoncodeigniter

Arrange database by website domain in PHP

I'm facing an issue where I need to extract domain names from a database and build buttons that can be used to sort the database based on these domains. For example, clicking on the Gmail button should sort users with Gmail accounts, and clicking on t ...

phphtmlcss

Storing extensive dictionaries in Django using PostgreSQL is a common and efficient practice

In order to store a list of airport codes and their corresponding names in a Django PostgreSQL database using models, I have created a dictionary with entries such as: airports = {"JFK": 'New York', "AAE": 'Annabah', "AAF": ...

jquerypythonajaxdjangopostgresql

Using jQuery to make an AJAX request to a Java backend server in order to update and refresh an HTML list

As someone new to using jQuery / AJAX with a Java backend system, I'm looking for guidance on making my first call. I have an HTML list structured like this: <ul> <li>Test 1</li> <li>Test 2</li> <li>Te ...

javajqueryhtmlajaxjson

Trying to conceal the scrollbar on MS Edge and Firefox?

Currently, I am working on a scrollable menu that requires the scrollbar to be hidden. In Chrome, I have achieved this by using the following code: .menu::-webkit-scrollbar { display: none; } I would like to know if there is an equivalent solution ...

htmlcssfirefoxscrollbarmicrosoft-edge

Using JSON encoding to create a new date object with the parameters year (yyy), month (MM), and

I am using a component called chap-tim JS (find it here: ) that requires the following JSON format: data = [ { 'start': new Date(2010, 7, 26), 'content': 'test ' } ]; Althou ...

jqueryjsonasp.net-mvc-3

Incorporating promises with ajax to enhance functionality in change events

Consider the scenario where you trigger an ajax request upon a change event in the following manner: MyClass.prototype.bindChangeEvent = function(){ $(document).on('change', '#elementid', function(){ var $element = $(this); $ ...

javascriptjqueryajaxpromise

What is the best way to eliminate quotation marks from a series of numbers?

Is there a way to eliminate double quotes from the data and enclose the numeric series in brackets? I am using php version 5.3.1, so I can't utilize json_numeric for conversion during json_ecode. [{"name":"First","data":"20,43,34,0,4,0,0,0,0,0,0,0"}, ...

jquery

Fetch data dynamically upon scrolling using an AJAX request

Instead of making an ajax call to load data, I want to do it on scroll. Here is the code I have: $.ajax({ type: 'GET', url: url, data: { get_param: 'value' }, dataType: ' ...

javascriptjqueryajax

Embracing the Power of Sass

I have recently revamped my portfolio website on Github Pages and now I am looking to integrate Sass for my upcoming Portfolio 2.0 project. Although I have worked with Sass before, setting it up from scratch is new to me. Currently, I have installed Sass ...

csssassgithub-pages

Experiencing a problem with the JavaScript loading function

An error was logged in the console SyntaxError: unterminated string literal A piece of code is supposed to display a notification $(document).ready(function () { alertify.success("Success log message"); return false; }); Despite testing the cod ...

javascriptjquery

Expand a list item to full width based on the number of items present

Is there a way to make dynamically added list items in a footer stretch across the width of their container? The footer is created in WordPress and the list items are actually widgets. Here is an example: Fiddle I can't manually set the width for e ...

htmlcsswordpresslistwidget

How can I make a 100vh div stick to the screen?

Is there a way to fix a Google map in a div to the screen so that the map on the left side remains fixed while the content on the right side can scroll? I've tried using position:fixed but it doesn't seem to be working. See the pictures below for ...

htmlcss

Challenge with Redrawing Jquery Footable

Currently utilizing jQuery Footable in my project, here is the code for loading data into a table: <table class="table table_striped toggle-arrow-tiny" data-show-toggle="true" data-filtering="true" data-sorting="true" data-paging="true" data-paging-pos ...

jqueryfootable

Creating a dynamic animation for a button in AngularJS

I'm having some trouble applying animations to an angular js button using traditional CSS and JS methods. Specifically, I'm attempting to include an opacity animation on the button. Can someone offer assistance? HTML <span id="sign_btn"> ...

htmlcssangularjs

javascript best practice for processing form data with arrays

As a newcomer to javascript, I've been exploring more efficient ways to handle certain situations. For example, would it be possible to utilize an array for this particular scenario? Here's the challenge: I have an HTML form with 6 fields that a ...

javascripthtmlformssorting

ReactJS how to prevent accordion from collapsing automatically

My custom accordion layout for the features needed in the site I am building is not working well with Jquery. How can I modify it to collapse properly? Specifically, I want it so that when I open number 2, number 1 will automatically close. I've trie ...

javascriptjqueryhtmlcssreactjs