Angular application's NgbTooltip positioning

Within my Angular 2/4 project, I am utilizing ng-bootstrap along with its NgbTooltip component.

Consider this HTML snippet:

<div class="col-sm-8 text-ellipsis" 
     ngbTooltip="'A very long text that does not fit'" 
     placement="top" 
     container="body">
    A very long text that does not fit
</div>

In addition to the provided custom CSS:

.text-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

Although my current implementation serves its purpose, I believe it can be further refined:

When the content is too lengthy, it gets truncated in the center of the div with the tooltip displaying correctly above it. However, with very short content, the presentation appears unsightly:

<div class="col-sm-8 text-ellipsis" 
     ngbTooltip="'1.jpg'" 
     placement="top" 
     container="body">
    1.jpg
</div>

https://i.sstatic.net/ZVL0C.jpg

Despite the tooltip still appearing above the div, it is now positioned far to the right due to the brevity of the text within.

One potential solution I brainstormed was to introduce a span element to house the tooltip instead of the div:

<div class="col-sm-8 text-ellipsis">
    <span  
     ngbTooltip="'A very long text that does not fit'" 
     placement="top" 
     container="body">
        A very long text that does not fit
    </span>
</div>

However, this workaround presented a new issue, as illustrated here:

https://i.sstatic.net/6ilpx.jpg

Now, the span itself is truncated within a wider div, causing the tooltip to be centered within the span rather than the intended div.

If you have any refined solutions to enhance this interaction, your insights would be greatly appreciated.

htmlcssng-bootstrapangular

Answer №1

Consider looking at the relationship between the width and min-width properties in your div element. Remember that span is an inline element and lacks block-level features like width. You might need to introduce another div element or set the span to display:inline-block in your CSS.

To create an ellipsis effect, set a min-width for the outer div where you want the text to start truncating (e.g. around 150px). Move the text-ellipsis class from the div to the span. Add a width of 100% to the span and make it display:inline-block (or use another div element).

Here's an example of how it could look (I've included the min-width:150px inline, but it's preferable to define this in the stylesheet):

<style>
    .text-ellipsis {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 100%;
    }
</style>

<div class="col-sm-8" style="min-width: 150px">
    <div class="text-ellipsis" ngbTooltip="A very long text that does not fit" placement="top" container="body">
        A very long text that does not fit A very long text that does not fit A very long text that does not fitA very long text that does not fit A very long text that does not fit
    </div>
</div>

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

What are the steps to initiating a phone call using Nativescript?

When I click the button, I want to initiate a phone call dialing the number displayed on the label. Here is my custom button: <ActionBar> <NavigationButton (tap)="onBackTap()" android.systemIcon="ic_menu_back"></NavigationButton> ...

angulartypescriptnativescriptnativescript-angular

tips for creating a jquery/css scales animation

I am looking to implement a unique feature on my website where I create scales with a balancing effect. The scales should mimic an up and down motion continuously. You can see an example of what I'm referring to here Is there a way in jQuery or CSS t ...

jqueryhtmlcssjquery-animate

Toggling Bootstrap Tooltip divs within a nested structure triggers the Tooltip of the parent div

I have a setup with 2 nested <div> elements, both utilizing the tooltip() function. When I hover over the inner <div>, the tooltip of the outer <div> also displays. To resolve this issue, I attempted to clear the title of the inner <di ...

csstwitter-bootstraptooltip

Why is the Django image URL redirecting to an HTML template instead of the media file?

I created a Django application with a template that includes an image. However, I encountered an issue where the server is attempting to display the image using the redirect link from the HTML template instead of retrieving it from the media file. For ins ...

htmldjangourlhttp-redirectdjango-templates

Refreshing the page is the only way to see the changes made by Angular's delete item function reflected

In my application, I am retrieving a table of users from an API. However, when I delete a user, the table does not update until I manually reload the page. This relates to the user service in my application. getUsers(): Observable<any> { return ...

angular

Ensuring the width of a div matches the adjacent containers

I need assistance in creating a form that adjusts its width based on the form fields. The form contains both explanatory text and input fields, each enclosed in a div with inline-block set. The outer div (also using inline-block) should not expand beyond ...

htmlcss

Utilizing Angular-cli and Karma for seamless integration with jQuery

I have scoured the internet and cannot seem to find a solution for my current dilemma, despite it being a widely known issue... Upon running ng test, I am faced with an empty Karma browser: https://i.sstatic.net/VKIHh.jpg Here is what my console display ...

jqueryangularkarma-jasmine

Is there a convenient method to combine arrays of objects in JavaScript using ellipses or an equivalent approach?

let array = [ {id: 1, data: {foo: "bar 1"}}, {id: 2, data: {foo: "bar 2"}} ]; //If ID doesn't exist, add new element to the array array = [...array, {id: 3, data: {foo: "bar 3"}}] console.log(array); //If ID exists, replace data object with new ...

javascriptarraysangularmultidimensional-arrayspread-syntax

Unusual Behavior in AngularJS: Using ng-include Triggers Full Page Reloading

An issue arises where a simple ng-include command causes the entire website to be printed recursively in a specific area of the page, ultimately crashing the browser. Even changing the path doesn't resolve the problem, suggesting that it's not ev ...

javascripthtmlangularjsangularjs-ng-include

Encountered issue while converting half of the string array to JSON using JavaScript

I encountered an issue with the code below while trying to convert an array into JSON. Here is my code: <html> <head> </head> <body style="text-align:center;" id="body"> <p id="GFG_UP1" style="font-size: 16px;"> </p ...

javascripthtmlarraysreact-fullstack

Resolving background div alignment issue in ASP.NET

I am facing a rather straightforward issue that requires resolution. I am currently working on fixing a background div (<div class="main-background">) that contains an image on my webpage. While it displays correctly in Design View in Visual Studio, ...

htmlcssasp.net

javascriptif the number is a whole number and evenly divisible

I am currently developing a script that tracks the distance traveled by some dogs in meters. It is basically just a gif running in a loop. What I want to achieve now is to display an image every 50 meters for a duration of 3 seconds. Here's my attempt ...

javascripthtml

Is there a way for a DOMWindow popup to automatically resize to fit its

Currently exploring JQuery and learning on the fly, I'm wondering if there's a method to automatically adjust the size of a DOM window based on its content? I've successfully modified the parameters to accept % width and height instead of p ...

javascriptjqueryhtmlbrowserpopup

Tips for fixing the error message "unable to access property 'property-name' of null"

I need assistance with retrieving data from a firebase database and storing it in an array using typescript. Below is the code snippet I am working with: export class ViewUserPage { public list = []; public ref = firebase.database().ref(); public ...

angulartypescriptfirebaseionic-frameworkfirebase-realtime-database

When jQuery adds new elements, their CSS may not be applied accurately

One issue I encountered is using jQuery to dynamically add new elements, only to find that the CSS isn't being applied correctly to the newly added element. To illustrate this problem, I created a jsFiddle. In the example, there are differences in sp ...

jquerycsstwitter-bootstrap

Using jQuery, extract the input value and verify its accuracy. If correct, display the number of accurately predicted results

I am attempting to extract the value from an input field and validate if the answer is accurate. Rather than simply indicating correctness, I aim to analyze and display the number of correct responses alongside incorrect ones. Encountering difficulties wit ...

javascriptjqueryhtml

Show product name when hovering over the image

Trying to achieve a hover effect where product titles appear in a contained box when hovering over the product image on the bottom overlay, instead of below the image itself. Tried CSS code recommended by Shopify, but it had no effect: <noscript> ...

cssshopifymousehover

Utilizing custom routing rules to fetch data from a local JSON file using http.get in Angular 2

Currently facing a challenge with Angular as a beginner, specifically when attempting to retrieve a local .json file using http.get. The issue seems to be related to my routing configuration, and I'm unsure how to resolve it. File Structure: api ...

jsonangularangular2-routingangular-routing

Adjusting the sensitivity of mousewheel and trackpad using JavaScript

I am currently utilizing CSS3 to smoothly move a div up and down based on the direction of scrolling. By monitoring the mouse wheel event, I can detect when a user scrolls down and trigger a CSS3 transition to slide the div up. However, I am encountering a ...

javascriptjqueryhtmlcss

Having difficulty accessing object property using Chunk Template Engine

I am working on a project where I have created a list of objects and now need to retrieve the object name from a template using the Chunk Template Engine. The object list has been initialized as follows: html.set("items", new Item[]{new Item("Item 1", 2) ...

javaandroidhtmlstringchunk-templates