The tooltip indicator fails to display

I'm having an issue with my tooltip. I would like my tooltip to look like this:

However, the actual result is like this:

Here is the HTML & jQuery code I am using:

 <td style="padding-left:5px;padding-right:5px;" align="left" data-toggle="tooltip" data-placement="top" data-container="body" title="segment" >

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

I am working with bootstrap version 3.3.2.

Your assistance is greatly appreciated.

Thank you.

javascriptjqueryhtmlcsstwitter-bootstrap-3

Answer №1

There seems to be a connection with the placement of the tooltip inside a <tr> element. The issue may arise from the predefined styles on the <tr>, causing the tooltip to appear in an unintended position.

To address this issue swiftly, you can try placing the tooltip within a <span> tag nested inside the <td>.

$(function () {
    $('.table1 td').tooltip({title:"test",placement:"bottom"});
    $('.table2 td span').tooltip({title:"test",placement:"bottom"});
});
.container{
  margin-top:20px;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <div class="row">
    <table class="table table-bordered table1">
      <tr>
        <td>
            standard td - tooltip inside of tr tag
        </td>
      </tr>
    </table>
  </div>
</div>

<div class="container">
  <div class="row">
    <table class="table table-bordered table2">
      <tr>
        <td>
          <span>
            tooltip item wrapped in span tag
            </span>
        </td>
      </tr>
    </table>
  </div>
</div>

Answer №2

Give this demo a shot, it will display the tooltip you need. Check out the Demo

<a href="#" data-toggle="tooltip" data-placement="right"
       title="" data-original-title="Tooltip on right"
       class="black-tooltip">Tooltip on bottom</a>

Answer №3

It looks like your code is correct, I have used this HTML in the example

<table>
  <tr>
    <td style="padding-left:5px;padding-right:5px;" align="left" data-toggle="tooltip" data-placement="top" data-container="body" title="segment" >
      TEST
    </td>
  </tr>
</table>

http://jsfiddle.net/o6ncwhsb/1/

Have you included JQuery UI or any other plugin for tooltips? It's possible that it might be overriding some CSS styles. I faced a similar issue some time back...

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

Creating a PHP script to generate a response for an AJAX request

I'm struggling with a logical issue in my script. The goal is to format some rows in a table without repeating the header, and then outputting all items as a variable passed to AJAX. However, I'm unsure of how to tackle this problem. function a ...

phphtmlajaxjoomla

Implement custom styles to enhance the appearance of users' Magento websites

Is it possible to add additional CSS only to users/customers who are logged into our webshop? If so, how should I go about it - through XML or PHTML? Stian ...

cssmagentophp

Simple HTML and CSS exercise for beginners to grasp the concept

I'm looking to modify the layout of a specific webpage at based on the following instructions: First, insert this link within the <head> <link rel="stylesheet" href="https://trafficbalance.io/static/css/sdk/sdk.css"> -next, add th ...

javascripthtmlcss

Adjusting the width of columns in an HTML/CSS table

Struggling to format a table based on specific requirements with no success: Some columns need to adjust width to fit content. Other columns should share remaining available width equally. Table width must not exceed parent width but still fill it. I tr ...

htmlcss

Using Jquery's scrollTop function will exclusively scroll to the initial id and disregard the rest

I currently have a sticky bar set up on my website to allow users to click a link and be scrolled to a specific part of the page. However, there seems to be an issue where it only scrolls to the first element. When clicking on another link, it slowly creep ...

javascriptjqueryhtml

Is there a way to update the background dynamically?

I'm currently developing a weather application and I want the background to change dynamically based on the data retrieved from an API. Initially, I set up a variable and utilized an if statement for this purpose. However, I encountered difficulty in ...

javascriptreactjs

Update AngularJS data models using the callback function "on change" from a jQuery plugin

Currently, I am in the process of developing a web application for a touchscreen computer that requires an on-screen keyboard. After searching extensively, I came across this fantastic (or at least the best one I could find) keyboard plugin: https://github ...

javascriptjquerydomangularjson-screen-keyboard

Ensuring the next tab is not accessible until all fields in the current tab are filled

I am working on a form with a series of questions displayed one at a time, like a slide show. I need help with preventing the user from moving to the next set of questions if there is an empty field in the current set. Below is the script I am using to nav ...

javascriptjqueryhtml

What steps can I take to ensure my code runs smoothly from a USB across all devices?

My code for a concept website is stored on a USB stick, but I'm facing a problem with my buttons being anchored to a G: drive on Windows. However, when I use a Chromebook, the USB stick is recognized as removable media and not a G: drive, causing the ...

javascripthtmlwindowschromebook

Expanding Submenu Width

Currently working on developing a Dynamic Sub-menu for Wordpress, similar to the one shown here: . However, I am facing an issue with the width as it is set to 'auto' but not aligning the sub-menu properly. I would like the sub-menus to float lef ...

javascriptcsswordpress

Tips for receiving input on one HTML page and displaying it on the next page using Angular 2

Just started learning Angular 2 and trying to work with data binding. I'm having trouble printing the value from one page to another through components. The code below prints the value on the same page instead of passing it to another page. Can anyone ...

htmlangulartypescriptangular2-routing

Getting the image name and extension in an Angular application

Within this block of code, I am working with an image named xyz.abc.jpg. I am able to extract the image extension successfully, but now I need to figure out a way to extract the image name itself without the extension included. Is there a way to achieve ...

javascriptangular

What is the best way to transfer an array made in JavaScript to a different JSP and subsequently utilize that array in a Java function within that JSP?

I have a script that needs to pass an array called "playernames" to a Java function on another .jsp. I'm looking for guidance on how to send this array to the other page and then retrieve it for my Java function. <script> function getPlayerName ...

javascriptjavahtmljsp

Consistently encountering errors when trying to install npm

While attempting to install the Search git whodotheyserve. com application, I encountered a persistent error that shows up regardless of what troubleshooting steps I take. I have experimented with different versions of npm, all of which are successfully in ...

javascriptlinuxnode.jsfirefoxnpm

AngularJS allows for dynamic routing within applications

I'm a beginner with AngularJs and I've run into an issue where the URL changes but the page remains the same. Any help would be greatly appreciated. Here is my configuration: var app = angular.module('MyApp', ['ngResource',& ...

javascriptangularjs

Issue with adding a separate audio track to a video in HTML

Currently, I am facing a challenge while working with React.JS. I am attempting to display a default video with sound, but I have separate files for the video and the sound. Although the video is working perfectly fine, I am struggling to synchronize the a ...

htmlreactjsaudiovideohtml5-video

Utilizing C# ASP.NET to Extract Data from a Web Page Post JavaScript Execution

Looking to extract all links from a web page in order to review where cookies are being set for compliance with UK legislation. In an effort to streamline the process, I am exploring automation options to save time. However, a challenge I am facing is tha ...

c#javascriptasp.net.nethtml

What steps should I follow to make a sticker adhere to a div?

I'm currently in the process of designing a sticker that attaches to the top of a div, much like this: https://i.sstatic.net/aG329.png <div className="upgrade-premium"> <div className="upgrade-team"> <h1>Prem ...

htmlcsssass

JavaScript for Dynamic Scaling Animations

I am currently working on animating an SVG button and I am trying to incorporate the transform property with a fadeout using opacity attributes in Javascript. This is how I have attempted to write the code: (Starting with opacity 0 and scale 0) (I am awa ...

javascriptcssattributestransform

Certain images fail to load when the properties are altered

I am facing an issue where the images in my child components do not show up when props are changed, unless the page is manually refreshed. There are no 404 errors for the images, and even when I inspect the image element, I can see the correct image link b ...

javascriptreactjsreact-redux