What prevents me from displaying the image in the Bootstrap tooltip?

I am currently utilizing the Bootstrap framework v3.3.0 for my website.

I'm trying to implement an image as a tool-tip when the user hovers their mouse pointer over an icon. Here is the HTML code I have:

<div class="col-sm-5">
  <div class="input-group">  
    <input type="text" class="form-control" name="trans_id" id="trans_id"/>
    <span class="input-group-addon">
      <a href="#" class="glyphicon glyphicon-question-sign" rel="tooltip" data-html="true" title="localhost/img/demo_img.png"></a>    
    </span>
  </div>
</div>

The jQuery code that I am using is:

$(document).ready(function() {
  $('.input-group-addon').tooltip({
    selector: "a[rel=tooltip]"
  })
});

However, I am unable to display the image on hover. Currently, the text mentioned in the title appears as the tool-tip displaying the complete image location path.

All relevant CSS and jQuery files have been properly included.

I would greatly appreciate assistance with this issue.

Thank you in advance.

javascriptjquerycsstwitter-bootstraptwitter-bootstrap-3

Answer №1

If you want to enable the html parameter, make sure to set it to true using this code snippet:

<a data-html="true" ...etc... >

Next, utilize the title attribute to insert your HTML content like so:

<a data-html="true" title="<img src='...' />" ...etc... >

You can find more information about this feature in the Bootstrap 3 documentation:

http://getbootstrap.com/javascript/#tooltips-usage

For a live example, check out this jsfiddle link:

http://jsfiddle.net/sifriday/7s81L84m/

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

Acquiring information to display in a div using innerHTML

I aim to create a div that displays different animal sounds, like: Dog says Bark Bark I've attempted various methods but I'm unable to get each pair in the array to show up in a div: const animal = [ {creature: "Dog", sound: "B ...

javascripthtml

Could it be possible that my consecutive POST and GET axios requests are gradually slowing down?

After chaining the POST and GET calls in my code, I noticed a slight slowdown and was curious if this is normal or if there's a more efficient approach. The delay in displaying the google map marker made me think that pushing the newly created marker ...

javascriptvue.jsvuejs2axios

Make sure to assign an id to the ng-template when using an Angular Bootstrap accordion

I'm struggling to assign a dynamic id to the heading template. I attempted to use id="{{group.title}}" but it doesn't seem to be working. Any assistance or suggestions would be greatly appreciated! <div ng-controller="AccordionDe ...

javascriptangularjsangular-ui-bootstrapangular-ui

The navigation bar overlays the background images

I'm struggling to adjust the positioning of my image so that it doesn't get hidden underneath my navigation bar. I want my background image to stay fixed while text scrolls over it, but I can't seem to figure out the correct height for my im ...

cssimage

JavaScript - Capture the Values of Input Fields Upon Enter Key Press

Here's the input I have: <input class="form-control" id="unique-ar-array" type="text" name="unique-ar-array" value="" placeholder="Enter a keyword and press return to add items to the array"> And this is my JavaScript code: var uniqueRowsArr ...

javascriptphpjqueryarrays

Explain the mechanics of the calculator code operating by inputting numerical values in a string format

Recently, I attempted to create a calculator in JavaScript and encountered a requirement to place the button values within single quotes as if they were strings. It's fascinating how these string values can work alongside operators to produce the desi ...

javascript

Customizing the appearance of Indicators and Paginator in PrimeNG Carousel

I have integrated a carousel using PrimeNG which has the following design here Take note of the style of the carousel indicators and navigators. I want to achieve the default style of indicators/navigators for the carousel as shown here I have included t ...

htmlcssangularangularjsprimeng

Learn how to efficiently reload a card in React upon submitting new data

Is there a way to automatically refresh the card component after submitting data without having to manually refresh the page? I've tried using useEffect but it's not updating the data even though the value is changing. Any suggestions on how to r ...

javascriptreactjsuse-state

The Vue JS task manager is unable to remove completed tasks from the list

I'm encountering an issue with the 'DELETE ONLY FINISHED' button. The goal is for this button to delete all finished tasks. When a task is completed, its 'finishedTask' property changes to true. I have attempted to store all finish ...

javascriptvue.js

What steps do I need to take to share my Node JS application on my local area network (

I have a Node.js application running on my Ubuntu machine successfully, as I can access it through localhost:8080. However, other machines on the network are unable to reach it. CODE: const portNumber = 8080 let app = express() app.use(express.static(__d ...

javascriptnode.jshostinglan

Ensuring the node array is easily accessible within the view

I am currently working on building a simple messaging system using express/nodejs. Although I have successfully implemented the feature to send messages to all users, I now want to enable users to have private 1-to-1 conversations. My aim is straightforwa ...

javascriptnode.jssessionexpress

Certain crucial happenings inhibit the ability of others to occur

Hey there! Want to check out the live application I'm currently working on? Simply click this link: turbo_synth This project is being developed using VueJS, however, the issue I've encountered does not seem to be related to Vue at all. The prob ...

javascriptvue.jskeyeventpiano

Using an arrow function in Aurelia to read a json file

I've been exploring Aurelia and delved into tutorials on PluralSight and Egghead.io, but I'm still struggling to resolve my current issue. In a JSON file named bob.json, there is a collection of objects related to Bob. Each object in the collect ...

javascriptjsonlambdaaurelia

JS Issue with Countdown functionality in Internet Explorer and Safari

I am having an issue with a JavaScript countdown not working on Internet Explorer and Safari, despite being tested on Windows 7. It works fine on Chrome and Firefox. I am unable to switch to a jQuery countdown due to certain restrictions on the website, so ...

javascripthtmlcountdown

Exploring the capabilities of Vue.js, including the use of Vue.set()

Just starting out with Vuejs and I have a query regarding the correct approach to achieve what I want. My Objective I aim to have some dates stored in an array and be able to update them upon an event trigger. Initially, I attempted using Vue.set, which ...

javascriptvue.jsmomentjsvuejs2

Generate text input fields dynamically and store their values in an array using the Backbone.js framework

Is there a way to dynamically create text boxes based on a number input field with type='number'? Essentially, every time a user increments the number input, a new text box should be added to the backbone.js view. Additionally, when values are en ...

javascriptarraysdynamicbackbone.jsinput

Is there a way to apply textTransform to all components across the board?

I need to ensure that all text in my muiv5 project is capitalized by default, unless specifically overridden using sx or individual component styling. My attempted solution: <ThemeProvider theme={theme}> <IntlProvider locale="en& ...

cssreactjsmaterial-uinext.js

How can I stop a browser from refreshing when I click the mouse?

After taking steps to prevent the browser back button from functioning by clearing history and disabling key events for page refresh, I am now seeking a way to also stop mouse clicks on the browser's refresh button. Can anyone offer assistance with th ...

javascriptjqueryhtml

locate the following div using an accordion view

Progress: https://jsfiddle.net/zigzag/jstuq9ok/4/ There are various methods to achieve this, but one approach is by using a CSS class called sub to hide a 'nested' div and then using jQuery to toggle the Glyphicon while displaying the 'nest ...

javascriptjqueryhtmlcss

Vue - Additional loading may be required to manage the output of these loaders

Currently working with Vue and babel. I have a function that's been exported // Inside file a.js export async function get() { ... } I am trying to link this exported function to a static method of MyClass // Inside file b.js import myInterface fr ...

javascriptvue.jsbabeljs