Enhancing Text Format with Bootstrap 4 Tooltips

Lately, I've been working on enhancing the appearance of tooltips on my website. Recently, I stumbled upon the sleek tooltips on Godaddy.com that I would like to emulate in terms of text formatting:
https://i.sstatic.net/sqF9V.png

Here is how my current tooltips look:
https://i.sstatic.net/1IRqN.png
Below is my existing code. While it may appear messy, please focus on the functionality of displaying the tooltip when hovering over an image: 

<img src="image URL here" width="20" data-toggle="tooltip" data-placement="top" title="A short description of your project/solution (max 250 characters), will only be displayed on the home screen, not in your post! If you do not wish to use this leave 'None'">

One key feature I am aiming to achieve is the ability to add new lines within the Tooltip content.

I welcome any suggestions or guidance on achieving this! Thank you in advance!

htmlcssbootstrap-4

Answer №1

One potential solution is to include the following code:

To insert a new line, you can simply add <br /> within the content, which should meet your requirements.

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 220px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  text-align: justify;
  /* This is what you need */
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
   <div class="tooltip">Hover me
  <span class="tooltiptext">A short description of your project/solution (max 250 characters), will only be displayed on the home screen. <br /> <br /> Second para not in your post! If you do not wish to use this leave 'None</span>
</div>

Answer №2

Solved by inserting 

data-html="true"

This enabled the usage of <br/> in the heading text

The revised code snippet:

<img src="image URL here" width="20" data-html="true" data-toggle="tooltip" data-placement="top" title="A brief overview of your project/solution (max 250 characters), will only appear on the main screen, not in your post! <br/> If you prefer not to use this, enter 'None'">

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

Tips for effectively using the Susy +pad mixin

How can I use the +pad method to add padding on a p element without extending it past a certain point? I've tried using +pad, but the p always goes beyond the desired stopping place. Take a look at this screenshot for reference: The issue arises when ...

csssassmixinssusy-compass

The display of the AngularJS {{variable}} is not supported within a script tag

<script type="text/template"> <div class="abcd"> <div class="efg" data-price="{{::displayPrice}}"></div> </div> </script> I am facing an issue with a template that contains a div element with the da ...

htmlangularjsshow

Having trouble initiating an AJAX call in Django and returning values to my form

Seeking assistance to run an AJAX call for a quick calculation in my django view and display the result within a span tag on my HTML page. New to Javascript, struggling with triggering my AJAX call. Below is my HTML and JS code: <input type="text" nam ...

javascripthtmldjangoajax

Using the Flex display property automatically adjusts the height of a button based on its

I have a main container, and within it, an <h1> heading and a <button>. I align them using justify content-between. Since the main container has a d-flex class, the button ends up having the same height as the main container. Is there a way to ...

htmlcssbootstrap-4flexbox

The automated test locator in Angular using Protractor is failing to function

I am facing a challenge with my angular web application as there are some elements that are difficult to interact with. One specific element is a checkbox that needs to be checked during testing: ` <div class="row form-group approval_label"> < ...

javascripthtmlcssangularjsangular

Customize the appearance of the "Collapse" component in the antd react library by overriding the default styles

Incorporating JSX syntax with *.css for my react component. Displayed below is the jsx code for the antd collapse section. <Collapse defaultActiveKey={["1"]} expandIconPosition="right" > <Panel header="This is p ...

javascripthtmlcssreactjsantd

Looking for help to prevent my bootstrap nav bar from collapsing and showing a hamburger menu on mobile devices. This is my first CSS project and I am seeking guidance

Looking for help keeping my bootstrap nav bar from collapsing on mobile devices (want it to display a hamburger icon). I'm new to CSS so any guidance is appreciated! This is the code for my nav bar using bootstrap classes... <nav class="navb ...

cssbootstrap-5

The sidebar momentarily shrinks before expanding again when the page is loaded

There is a sidebar on my website that can expand or collapse when a button is clicked. I have successfully saved its state in the localStorage, but there is a small issue that I need help with. When the page loads and there is no saved state in the localS ...

javascripthtmljquerycss

Tips for creating a div that covers the entire screen and prevents it from resizing

I am facing an issue with a container having the className "container". When I set the height to 100vh like this: .container{ height:100vh } Whenever I resize my screen, such as with dev-tools, the div also shrinks. How can I prevent this? Is it possi ...

css

The click functionality is not functioning properly within the .each() loop

For my event handler, I am trying to use click() but it doesn't seem to be working. Here is the code snippet: $('.ajax-close').click(function( event ){ event.preventDefault(); alert('hi'); $( ' ...

javascriptjqueryhtmlcss

Websites experiencing horizontal scrolling functionalities

I have noticed that in my angular project, the website becomes horizontally scrollable when I log in. This only happens after logging in, and does not occur beforehand. I'm using angular calendars and Bootstrap for styling. What could be causing this ...

angulartypescriptbootstrap-4

Instructions for creating a row container:

I'm still relatively new to HTML and I am currently in the learning process. However, I am encountering some difficulties when it comes to linking rows and divs. My goal is to create something similar to the image shown below where each element can b ...

htmlcssflexboxrowmultiple-columns

Mirror Image Iframes

Currently, I have been tasked with constructing a side-by-side "frame" using HTML. The idea is that when the content in the iframe on the left is selected, it will appear in the iframe next to it on the same page. Here's some additional context: The ...

javascripthtmlcss

What are the possible reasons for my load function failing intermittently?

I have encountered an issue with my app where sometimes the content is not loaded into a dialog. Most of the time it works perfectly, but occasionally it fails to display the content. Here is the code snippet that I am using: $('#popup_background&apo ...

javascriptjqueryhtml

React Bootstrap Hamburger Menu in Motion

I've been struggling to move my hamburger menu to the right side of the screen. Despite trying various methods like float, shift right, and alignment, the menu stubbornly remains on the left. I've scoured all the Stack Overflow articles on this i ...

javascriptcssreactjsbootstrap-4

Tips for showcasing circles in a non-traditional layout

Is it possible to achieve the layout shown in the image below using CSS? I've tried using shape-outside: circle(); but it's not coming out as expected. Any suggestions on how to accomplish this? <!DOCTYPE html> <html lang="en"> <h ...

javascriptcss

Switch up the design on Bootstrap 4 navigation tabs

Trying to customize the appearance of the current tab in a nav-tabs setup has been a bit challenging. I've created a simple file to test this functionality. When a tab is clicked, the content switches correctly, but I'm struggling to apply specif ...

cssbootstrap-4

What is the best way to add an image using a div in React?

I need assistance getting an image to display as the background in a div element, but it's not working. Below is my code: <div style='background: url("https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixid=M ...

htmlreactjs

What is the best method for selecting or deselecting all checkboxes except for one using a single checkbox in angularjs

$scope.checkAll = function() { if ($scope.selectedAll) { $scope.selectedAll = true; } else { $scope.selectedAll = false; } angular.forEach($scope.MyProducts, function(item) { item.Selected = $scope.selectedAll; }); /*});*/ } <di ...

javascriptcssangularjshtml

What is the best way to invert the positioning of the li elements to move upwards?

https://i.stack.imgur.com/mZaoS.png Seeking assistance on adjusting the height of bars to start from the bottom and go upwards instead of starting from the top position and going downwards. The JavaScript code below is used to generate the li elements and ...

javascripthtmlcss