Implement a scrolling feature to the tooltip when using "data-toggle"

I'm struggling with a piece of code that showcases a tooltip when the user hovers over the question circle icon. The tooltip's content can't exceed 1000 characters, but I need to figure out how to make the overflow scroll by adjusting the tooltip in data-toggle mode.

&nbsp;<i class="fa fa-question-circle" data-toggle="tooltip" title="@participant.DeclineReason" data-placement="bottom"></i>

Although I have the code for the data toggle in the JS script, I'm uncertain about how to modify the tooltip properties:

@this.ScriptBlock(@<script>
    $(function (){
        $('.pie-chart').each(function () {
            $(this).pieChart({
                type: 'pie',
                barColor: getColor($(this).attr('data-percent')),
                trackColor: '#eee',
                lineCap: 'round',
                lineWidth: 5,
                rotate: 0,
                size: 145
            });

            $(this).find('.pie-chart__percentage').text($(this).data('percent') + '%');
        });

        $('.pie-chart-notparticipating').each(function () {
            $(this).pieChart({
                type: 'pie',
                barColor: getContrastColor($(this).attr('data-percent')),
                trackColor: '#eee',
                lineCap: 'round',
                lineWidth: 5,
                rotate: 0,
                size: 145,
                
            });

            $(this).find('.pie-chart__percentage').text($(this).data('percent') + '%');  
        });

        $('[data-toggle="tooltip"]').tooltip();  <-------------//this line here
    });

Answer №1

Setting both max-height and height for a CSS class

.popup{
   max-height:30px;
   height:80px;
   overflow-y:auto;  
}

Answer №2

Unfortunately, I'm unable to leave a comment due to my lack of reputation. However, an improved solution could involve utilizing the auto property instead of scroll.

.tooltip {
  max-height: 80px;
  overflow-y: auto; }

The use of auto eliminates the display of a scrollbar when scrolling is unnecessary.

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

How can I make my div disappear when I click outside of it using jQuery? I am finding the solution on Stack Overflow to be confusing

Utilizing jQuery to conceal a DIV upon clicking outside of it Although I've heard positive feedback about this method, I'm uncertain about its functionality. Can someone provide an explanation? I understand that .has() identifies elements contai ...

jQuery smooth scrolling problem causing a one-second page "blinking" issue

Currently, I have implemented a smooth scrolling effect on my website using the following jQuery code: jQuery('html,body').animate({scrollTop:scrollTarget}, 1000, "swing"); Although the effect works well in general, I have noticed that when mul ...

Place a "sticky" button directly below a second "sticky" navigation bar

Within my app file, I have customized components like an appbar and various page elements: const styles = theme => ({ appBar: { width:'100%', }, }); class App extends Component { render() { const {classes} = this.props; ...

What is the best way to switch between displays within an if-else statement?

I've been struggling to toggle the circle on click to reveal the checkmark and hide the circle. I've already implemented the hover effect in CSS where the circle disappears and the checkmark appears. HTML <p class="reme"> <a href="#" ...

Tips for customizing the color of the current date in the angular-material datepicker

I've created a function in angular-material to disable dates two days from now, but I'm struggling to change the color of the current date if it's disabled. The issue is that when the current date is disabled, it displays in a very light blu ...

I have implemented a custom-built sidebar component and I'm unsure about the process of adding data to it

After successfully incorporating this SideBar into my Vuex/Laravel project, I encountered a problem. The example code provided used: <div :class="$style.sidebar"/> However, when I tried to modify it to: <div :class="$style.sidebar">Content&l ...

What is the most efficient way to apply multiple values to the css property outline?

Currently, I am working with IE11 to display a dialog box. The default style for the button in focus includes a dotted border. Is there a way to add an additional value for the outline attribute, like shown below: input[type=button]:focus{ outline: 1p ...

Arrange objects on a grid

I've got an array filled with objects, each containing 3 images, a name, and some details. I'm attempting to display these objects on Bootstrap cards, but currently each card is showing up on its own line. My goal is to arrange the cards in a gri ...

What is the best way to align a div with a td within a table?

I have a table and I inserted a div inside it, but now the alignment with the td is off. I applied display: inline-block to both the td and div elements, but the td only shifted slightly. How can I correct this? Here's my HTML code for the table : ...

CSS based on conditions for 2 specific divs

Hello, I am working on an HTML page where I need to apply CSS only if certain conditions are met. The div with the id "flipbook-page3-front" will always be present on this HTML page. Sometimes, another div with the id "pagesFlipbook" may also appear on t ...

Waveform rendering in HTML5 using wavesurfer.js struggles to handle large mp3 files

Recently, I was considering incorporating wavesurfer.js into one of my projects so I decided to explore the demo on To test it out, I uploaded a large mp3 file (approximately 2 hours long) onto the designated area in the middle of the page. It appeared to ...

Utilizing JavaScript, HTML, and CSS to incorporate images within circular frames

After finding inspiration from this question about rotating objects around a circle using CSS, I decided to modify the code to include images of Earth orbiting the Sun. The challenge was to make one image orbit another like a planet circling its star. Ear ...

Differences in typography across Mozilla Firefox and Internet Explorer

I have come across a question that seems quite common, yet unsolvable. However, I will give it a try anyway. Take a look at this image: To view a larger version of the image, visit the following URL: https://i.stack.imgur.com/dddNm.jpg HTML code: <d ...

Difficulty encountered with cURL while attempting to submit information to a Gravity Form on an external website

I am managing two DISTINCT websites: Website A: An interactive Wordpress site featuring a Gravity Form. Website B: A separate non-Wordpress site that hosts a basic form - the information collected from this form needs to be transferred to Website A' ...

How can I establish a connection with SQL Server and set up a new database in ASP.NET MVC?

I've been following this tutorial: http://www.codeproject.com/Articles/986730/Learn-MVC-Project-in-days-Day I'm encountering an issue on day 3 in the first step - Step 1 – Create Database. I'm unsure of how to proceed. UPDATE I managed ...

Capture user input to extract data from a JavaScript object

I need help with implementing a search function where users can enter a name and the person's extension will be displayed on the UI either by clicking a button or pressing "return". Any ideas on how to make this feature work seamlessly? UI <html ...

Invalid template detected within the Kendo dropdown component

I am trying to create a template that will only be displayed if the data value is "Low". This is how I have set up my template column: template: '# if( data=="Low" ){#<span><i class="fa fa-square blue"></i> <span># } ' U ...

Interact with AngularJS and ASP.NET MVC by invoking controller actions

Previously, I used the following code to retrieve a JSON result from a function before integrating AngularJS: $.ajax({ url: '@Url.Action("getGamedata", "Home")', type: 'GET', dataType: 'json', ...

Transforming HTML into a DOCX document

I am exploring all possible options for converting an HTML document to a DOCX file. Background : I have some simple documentation in HTML (just basic elements like H1, H2, P, IMG), and I want to transform it into Word documents. An ideal solution would ...

Ways to connect to an element's data- attribute

I am working with a data attribute that looks like this: <a href="stuff" data-open-dialog="location-XXXX">click</a> <a href="stuff" data-open-dialog="location-YYYY">click</a> How can I bind to the data-open-dialog and extract the ...