Styling a CSS triangle on the right side of a MaterialUI tooltip

Having an issue with the changing height of content in some tooltips. See how it's supposed to look here. I've attempted to address this problem by adjusting the design for both small (sample image) and big (sample image) content.

This is the code snippet I implemented:

const ToolTip = withStyles(() => ({
  tooltip: {
    display: "inline-block",
    backgroundColor: "#ffff",
    color: "#000",
    maxWidth: 280,
    fontWeight: 600,
    fontSize: 12,
    marginRight: 80,
    boxShadow: "0px 60px 116px rgba(0, 0, 0, 0.05), 0px 23.9688px 48.462px rgba(0, 0, 0, 0.0322996), 0px 10.925px 25.9101px rgba(0, 0, 0, 0.0260072), 0px 4.59406px 14.525px rgba(0, 0, 0, 0.0223691), 0px 1.44481px 7.71412px rgba(0, 0, 0, 0.018802), 0px 0.13156px 3.21002px rgba(0, 0, 0, 0.0130265)",
    textAlign: "justify",
    paddingRight: 30,
    borderRadius:8,
    position: "relative",
    minHeight:"160px",
    border: "1px solid rgba(0, 0, 0, 0.12)",
    '&::before': {
      content: '""',
      display:"block",
      position: "absolute",
      top:0,
      right:-80,
      borderBottom: "85px solid transparent",
      borderTop:"85px solid transparent",
      borderLeft: "85px solid #ffff"
    
    }
  },
}))(Tooltip);
cssreactjsmaterial-uifrontendcss-shapes

Answer №1

Instead of relying on borders, you have the option to utilize clip-path. This allows you to specify a polygon in % terms, ensuring that it adjusts automatically to the dimensions of the div.

Here's a simple code snippet to illustrate this concept. The background is applied using a before pseudo element that extends beyond the width of the div containing the text.

div {
  width: 200px;
  height: auto;
  min-height: 50px;
  padding: 10px;
  position: relative;
}
div::before {
  content: '';
  width: 130%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 5%;
  background-color: gray;
  clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%);
  z-index: -1;  
}
 <div>Some text here</div>
 <div>Masses of text here Masses of text here Masses of text here Masses of text here Masses of text here Masses of text here Masses of text here</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

Troubleshooting image overlay alignment concerns

My script successfully adds the image src to the overlay's image, but I encounter a problem when creating the variable imgH for the margin-top value. It calculates the image's height and divides it in half. The issue arises when the calculated h ...

jqueryhtmlcss

Hydration Error arises when Next.js SSG Suspense is triggered

My static site is encountering an issue when trying to display a simple list of items retrieved from Supabase. Everything was working fine in React 17, but after upgrading to React 18, I am now getting sporadic errors and the fallback doesn't consiste ...

reactjsnext.jsswr

Skip the login screen in Keycloak by utilizing the access token

Our project has a specific requirement to skip the login page and grant immediate access to users based on a token containing their email address. To accomplish this, we are utilizing the user's email to create an access token using admin credentials ...

reactjsauthenticationsessionkeycloakkeycloak-connect

Simple steps to modify the width of underline using CSS

One of the cells in my table has the following content: <td><b>Grand Total</b></td> I want to add a line under the text "Grand Total". I tried using text-decoration: underline;, and it worked fine. However, I now need to customize ...

htmlcss

Obtain data from files within a React frontend application

I have integrated an API endpoint into my NodeJS application. The purpose of this endpoint is to locate a specific file in a folder based on the filename provided in the request. Here's how I am approaching this: const fileDirectory = 'C:/Sites/p ...

javascriptreactjsnode.jsreadfilenode.js-fs

Creating a Javascript object from a predetermined array of keys, with the values starting as null

When working with a JavaScript object, I need to extract an array of keys using Object.keys(). Next, I want to use those keys to create a new object where the values are initialized to null. In Python, a similar task would look like this: list_of_keys = [ ...

javascriptreactjsjavascript-objects

Implementing personalized font styles in HTML on a WordPress platform

I recently followed a tutorial on how to upload custom fonts to my WordPress website, which you can find at the link below. I completed all the necessary steps, such as uploading to the ftp, modifying the header.php file to include the font stylesheet, and ...

phphtmlcsswordpressfonts

Clicking on the Bootstrap tabs causes them to shift position

I have come across an unusual issue with my website. While on the home page, clicking on a tab functions normally. However, when attempting to switch from one tab to another (such as News to Beats, Beats to News, News to Home, or Beats to Home), the tab co ...

javascripthtmlcsstwitter-bootstraptabs

What feature in React Native allows the use of local folders as a 'package name'?

Hey there, I have a bit of an odd question that I think you can help me with! So in React Native, you have the ability to create a package.json file within your config folder. The contents may look something like this: { "name": "@config" } After addi ...

node.jsreactjsreact-nativebabeljspackage.json

Trouble with background image displaying on meteor platform

Hey there! I'm in the process of replicating the HBO login page without functional links, but for some reason, the background image isn't loading properly. I suspect it might be an issue with resizing the image, but I can't pinpoint the exac ...

cssmeteorjsx

Encountering an issue with DateTimeField being undefined in a React.js application

I encountered an issue stating that DateTimeField is not defined while attempting to create a date picker in react + bootstrap. I referred to the following URLs for assistance: https://github.com/Eonasdan/bootstrap-datetimepicker Link to my code s ...

javascriptreactjs

Ways to center text vertically alongside an image

<ion-view view-title="个人信息"> <ion-content> <style> .user-details { display: flex; align-items: center; justify-content: space-between; height: 80px; } .us ...

htmlcssimagetext

When the content within a dialog element exceeds the boundaries of the dialog, it will not be displayed

Issue Struggling with creating a dialog element that includes an x button for closing the <dialog> in the upper-right corner. My initial idea was to utilize absolute positioning and transforms to achieve this functionality, but encountered a setback ...

javascripthtmlcssdialogmodal-dialog

Spree Deluxe - Customizing color scheme variables

We're struggling to modify the color variables in Spree Fancy. The documentation suggests creating a variables_override.css.scss file. But where exactly should this file be placed? We've tried adding it under the stylesheets folder in assets and ...

cssruby-on-railssassspree

Center Align Images in HTML List Items

Hey there! I'm currently diving into the world of web development with responsive design, but I'm still a bit of a newbie. So please bear with me as I try to explain my issue in detail. If you need more information, just let me know! My current ...

javascriptjqueryhtmlcss

The function ref.current.setAttribute does not exist

https://codesandbox.io/s/react-16-2fss1 import React, { useRef, useEffect } from "react"; import { render } from "react-dom"; import Autosuggest from "react-autosuggest"; const styles = { fontFamily: "sans-serif", textAlign: "center" }; const Custom ...

reactjs

Is your navigation bar failing to extend to the entire width of the page

Click Here for the Host Folder If you follow the link and then click on "all.html," you will come across a page with an incomplete navbar. The li elements in the list appear to be stacking oddly, causing "Member Resources" and others to show up in a row b ...

htmlcsstwitter-bootstrapnavbar

React.js error message: "Attempting to set property 'setState' which is undefined"

import React, { Component } from 'react'; class Comment extends Component { constructor(props) { super(props); this.state = { editing: false, }; } edit() { this.setState({ editing: true }); } remove() { this ...

reactjses6-classsetstate

What is the best approach to creating versatile TypeScript types/interfaces for front-end documents?

Imagine we have the following model structures: const catSchema = new Schema({ name: String, favoriteFood: { type: Schema.Types.ObjectId, ref: 'FoodType' }, }); const foodType = new Schema({ name: String, }); In this scenario, the favorit ...

reactjstypescript

Issue with border-radius.htc in IE8 on a specific page (functional in a basic demo page)

I utilize border-radius.htc to create rounded corners on older versions of Internet Explorer that do not support the border-radius CSS property. I follow the instructions provided in the documentation to implement it properly. It works perfectly on a simpl ...

htmlcssinternet-explorer-8