How can one effectively pass arguments to jQuery in order to set the tooltip text for Bootstrap from an element within the HTML body

I'm working with a simple markup that triggers a colorful bootstrap tooltip when hovering over a button in the body. Currently, the tooltip text is hardcoded into the jQuery function. I want to find a way to pass the tooltip text to the jQuery function from the button markup instead. How can this be achieved? (keep in mind that this will eventually be ASP.NET markup)

<html>
<title>toolTips</title>
<head>

  <script type="text/javascript" src="jqueryScripts\jquery-2.1.0.js"></script>     
  <script type="text/javascript" src="jqueryScripts\bootstrap.min.js"></script>     
  <link rel="stylesheet" type="text/css" href="jqueryScripts\bootstrap-combined.min.css">     

  <style type="text/css">
    .red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
    .red-tooltip + .tooltip > .tooltip-arrow { border-bottom-color:#f00; }
  </style>

<script type='text/javascript'>
$(
   function(){
      $('#userNameField').tooltip({    
          'placement': 'bottom',
          'title': "...this is a test tooltip..."
       });
}); 

</script>

</head>
<body>
    <input type="submit" class="red-tooltip" id="userNameField" value="button1">  
</body>
</html>
jqueryhtmlcsstwitter-bootstrap

Answer №1

To add a tooltip, you can simply use the title attribute:

<input type="submit" class="red-tooltip" id="userNameField" value="button1" title="This is the actual tooltip">

Here's how it works: 

$(function(){
  $('#userNameField').tooltip({    
    'placement': 'bottom',
    'title': "...this is a test tooltip..."
  });
});
.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
    .red-tooltip + .tooltip > .tooltip-arrow { border-bottom-color:#f00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<input type="submit" class="red-tooltip" id="userNameField" value="button1" title="This is the actual tooltip">

The Bootstrap tooltip feature will retrieve the content from the title attribute to display as the tooltip.

Answer №2

After some experimentation, I have found a solution that seems to be effective - by including the following script in the script section:

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

I also introduced a new button on the page to utilize this script, while the original script is still used for the first button:

<input type="submit" class="red-tooltip" value="button2" data-toggle="tooltip" data-html="true" data-placement="right" title='test button2'>

In the future, I plan to implement this with asp.net boundfields rather than using runat="server" controls. The content of the title will be extracted from #Eval.... within a gridview consisting of rows of boundfields with varying title contents.

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

Updating the date format for database validation

There are only a few dates available in the database, and I need to select another date using a jQuery datepicker. The catch is that I can only choose a date from the database, and then display this validated date in an alert. The challenge lies in the fac ...

phpjquerymysqldatedatepicker

What could be the reason for the lack of functionality in this jQuery code when combining a for loop with the $

<!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ for(let i = 0 ...

jqueryajaxget

Retrieve an integer value from an HTML form

I need to extract an integer value from an HTML form using Python. Here is the code I tried: form = cgi.FieldStorage() if not form.has_key("id"): error_pop("There is no id in this form","The format of the request is not correct") id = ...

pythonhtml

Exploring the usage of slots in WebComponents without relying on shadow DOM

I am working on developing a WebComponent without utilizing ShadowDOM. So far, everything has been going smoothly. However, I now aim to create a component that wraps other components similar to how it is done in Angular with @ViewChild / @ViewChildren. (I ...

javascripthtmltypescriptweb-component

Minimize the gaps between items within a CSS grid design

I'm struggling with adjusting the whitespace between 'Job Role' and 'Company Name' in my grid layout. Here's a snippet of what I have: https://i.sstatic.net/l55oW.png The container css is set up like this: .experience-child ...

htmlcsscss-grid

Adding an image to an HTML <span> element using the class attribute "

I need help adding an image to my HTML code. For example, how can I specify which image should be displayed in place of the placeholders? Thank you for your assistance! ...

htmlcssimage

Calculate the quantity of rows within a specific div container

Looking at the image provided, there are multiple divs inside a main div. I am trying to figure out how many rows the main div contains. For instance, in this particular scenario, there are 5 rows. It is important to mention that the inner div is floated ...

javascriptjqueryhtmlcss

The jQuery .post function is successfully executing, but it is strangely triggering the .fail method without

My data is successfully being posted, but I'm struggling to get my .post response handler code to work efficiently. The results seem inconsistent across different browsers and tools that I have tried. Here's the code snippet for the post: $.post ...

javascriptjqueryjsoncross-domain.post

Performing bulk operations on all selected rows in a table using Angular 6

Within my Angular 6 web application, there is a table with checkboxes in each row. My goal is to be able to perform bulk actions on the selected rows, such as deleting them. One approach I considered was adding an isSelected boolean property to the data m ...

angularhtmltypescript

Converting a jQuery/JSON/PHP object to a C# function

Hello everyone, I am new to JSON and I recently came across an example that uses PHP and jQuery (http://wil-linssen.com/entry/extending-the-jquery-sortable-with-ajax-mysql/). My goal is to take the serialized "order" object and utilize it in a C# method j ...

c#phpjqueryjsonc#-4.0

The <main> element is not inheriting the height of its parent

https://i.sstatic.net/PchVf.png Using Chrome DevTools, I removed unnecessary elements from the DOM. The body is set to relative and takes up all available space in the document, which is exactly what I want. https://i.sstatic.net/AzELV.png My toolbar i ...

htmlcss

I am experiencing difficulty with playing my embed file on Chrome as the request for the audio file is consistently being "canceled."

I implemented a feature on my webpage that uses jQuery to play a sound whenever users make an error. Here is a snippet of the HTML code: <embed id="beepCache" src="sound/beep.wav" autostart="false" type ="audio/x-wav" width="0" height="0" hidden="hidd ...

jqueryhtmlgoogle-chrome

Tips on populating a text input field using ajax

This is the Jquery and ajax code I have written to load text box data sent from the server class. I am receiving a response, but for some reason, the data sent from the server is not loading into the textbox. You can see the error here. $(document).read ...

javascriptjqueryajax

How can we distinguish a login form to enable autocomplete functionality?

A common issue arises with login forms that allow web browsers to save usernames and passwords. Consider a scenario where a user changes their password from "Password01" to "Password02". Unfortunately, the browser does not recognize the password reset form ...

htmlformsautocompleteauthentication

When incorporating Transify, don't forget to apply the border-radius property to enhance

I found a solution to make a div semi-transparent using Transify, but I also want to add rounded edges. The issue I'm facing is that the rounded edges only appear after the page has fully loaded when using Transify. Here is the CSS code: .grid { ...

jquerycss

Loop through the AJAX response containing JSON data

Need assistance in extracting specific information from each hotel key and its rates within this JSON structure using JavaScript: [ { "auditData": { "processTime": "1545", "timestamp": "2016-04-08 04:33:17.145", ...

javascriptjqueryjsonajax

Grid X Transformation 3: Dynamically alter grid cell background based on value (no need for CSS classes)

While working with GXT2, it was possible to dynamically change a cell's background color using the GridCellRenderer's render method. However, in GXT3, this feature no longer exists. The suggested approach is to utilize a GridViewConfig and overri ...

cssgxt

Retrieving information through the $.getJSON() function

As I develop a web application, I find myself in need of initializing certain parameters by fetching them using the $.getJSON() method. $.getJSON("../config/", function(data) { console.debug(data); } These values are important on a global scale with ...

javascriptjquerygetjson

Is it possible to modify the background-image using Typescript within an Angular project?

I have been struggling to change the background image in my Angular project using Typescript. I attempted to make the change directly in my HTML file because I am unsure how to do it in the CSS. Here is the line of code in my HTML file: <div style="ba ...

angularhtmltypescript

Positioning the icon within the input field

I am facing a couple of challenges. I have chosen to utilize focus and blur for text values in input fields instead of placeholder text due to an issue in Chrome where the placeholder text is centered. My goal is to position the icon in the input field, p ...

cssiconsalignment