Steps to make a unique custom tooltip without using jQuery by utilizing the title attribute

I am looking to implement a tooltip similar to the one shown in the image. The value in the title tag is dynamic and fetched from the controller. https://i.sstatic.net/C2v3D.png

Below is the code snippet of my table:

<table border="1" cellpadding="10">
  <tbody style="white-space: nowrap;">
    <tr ng-repeat="row in rows">
      <td style="width: 2%;">
        <input type="checkbox" 
               ng-model="tableSelection[$index]"
               style="margin-left: 10px;">
      </td>
      <td style="font-size: smaller; width: 27%; color: gray; white-space: nowrap;"
          ng-repeat="col in input_columns"
          droppable="dropable"
          drop-fn="drop"
          drop-index="$index"
          drop-data="col"
          title=""
          ng-click="openDialog($event,$index)"
          tempValue="">&lt;enter data&gt;</td>

      <td style="font-size: smaller; width: 27%; color: gray; white-space: nowrap;"
          ng-repeat="col in output_columns"
          droppable="dropable"
          drop-fn="dropOutput"
          drop-index="$index"
          drop-data="col"
          title=""
          ng-click="openDialogOutputConst($event,$index)">&lt;enter data&gt;</td>
    </tr>
  </tbody>
</table>

I am seeking assistance on how to implement a tooltip like the one mentioned above.

angularjshtmlcss

Answer №1

Is this something you're looking for?

td {
  position: relative;
}

td:hover:before {
  content: attr(data-title);
  position: absolute;
  background-color: yellow;
  top: 100%;
  width: 200px;
  white-space: normal;
  word-spacing: 200px; 
}
<table border="1" cellpadding="10">
  <tbody style="white-space: nowrap;">
    <tr ng-repeat="row in rows">
      <td style="width: 2%;">
        <input type="checkbox" ng-model="tableSelection[$index]" style="margin-left: 10px;">
      </td>
      <td style="font-size: smaller; width: 27%; color: gray; white-space: nowrap;" ng-repeat="col in input_columns" droppable="dropable" drop-fn="drop" drop-index="$index" drop-data="col" data-title="Idaho Illinois Indiana Iowa Kansas Missouri Nebraska Ohio"
      ng-click="openDialog($event,$index)" tempValue="">&lt;enter data&gt;</td>

      <td style="font-size: smaller; width: 27%; color: gray; white-space: nowrap;" ng-repeat="col in output_columns" droppable="dropable" drop-fn="dropOutput" drop-index="$index" drop-data="col" data-title="Some text here" ng-click="openDialogOutputConst($event,$index)">&lt;enter data&gt;</td>
    </tr>
  </tbody>
</table>

Answer №2

To create a unique design, one could utilize the use of the :before and :after pseudo-elements combined with manual positioning.

By using the :before element for creating a stroke effect and the :after element for displaying a tooltip, an interesting design can be achieved.

body {
  margin-top: 100px;
}

.item {
  position: relative;

  display: inline-block;
  padding: 20px;

  background: #fff;
  border: 2px solid crimson;

  // styling for the stroke
  // and the tooltip
  // initially hidden
  &:before,
  &:after {
    content: '';
    position: absolute;
    display: none;
  }

  // styling for the stroke
  &:before {
    width: 100px;
    height: 2px;
    background: crimson;

    right: -100px;

    transform-origin: 0 0;
    transform: rotate(-20deg);
  }

  // styling for the tooltip
  &:after {
    content: attr(title);
    color: #fff;

    top: -30px;
    right: -250px;

    width: 150px;
    padding: 5px;
    background: #000;
  }

  // show before and after elements on hover
  &:hover {
    &:before,
    &:after {
      display: inline-block;
    }
  }
}

Explore this design on JSFiddle

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

Looking for guidance on implementing a server-side 310 redirect and mod rewrite on a stamplay server?

In Angular framework, there is an option to eliminate the # symbol from the URL by setting $locationProvider.html5Mode(true);. This results in aesthetically pleasing URLs and facilitates proper sharing on platforms like Facebook, as complete URLs are pas ...

angularjshostingstamplay

Location of Custom HTML Widget in Django-Dashing

I've encountered a dilemma while using the Django-Dashing framework, specifically regarding the placement of my HTML file for a custom widget. I have meticulously configured the code in my dashboard.html file to ensure proper loading. {% extends &apo ...

javascripthtmldjangodashingrivets.js

What is the best way to generate script code dynamically on an HTML page depending on the environment?

I am facing a challenge with my asp.net application. I need to insert a dynamic script into the html section, and this script's value must change depending on the environment (TEST, QA, etc.). To illustrate, here is the script where DisplayValue is th ...

javascripthtmlasp.net

Creating a custom dynamic favicon and title in NextJS

Hello there! I am in the process of creating a web constructor. Currently, my application functions as follows: I verify the URL that the user is visiting (such as localhost:3000) I identify their project name within my web constructor (localhost:3000 -&g ...

javascripthtmlcssnext.jsseo

CSRF validation did not pass. The request has been cancelled. The failure occurred due to either a missing or incorrect CSRF token

Upon hitting the submit button in the login form, I encountered the following error message: Forbidden (403) CSRF verification failed. Request aborted. CSRF token missing or incorrect. settings.py MIDDLEWARE = [ 'django.middleware.security.Secur ...

javascripthtmlcsspython-3.xdjango-rest-framework

HTML template with three columns where the content spills over the edges, despite having a visible border and a height of 100%

I have a wrapper containing 3 divs: <div id="wrapper"> <div id="leftbar"> Lorem ipsum dolar sit amet </div><!--LEFTBAR--> <div id="middle"> Lorem ipsum dolar sit amet </div><!--middle--> <div id="rightbar"&g ...

htmlcss

What could be the reason for the absence of the loading sign in Chrome, even though it appears when the code is run on Firefox?

I implemented a function to display a loading screen on my HTML page with Google Maps integration. However, when I called the function popUpLoadingScreen() and dismissLoadingScreen() to show and hide the loading message while rendering map markers, the loa ...

javascripthtmlcss

Navigate up to the ancestor element before moving back to the previous two sibling elements using Xpath

Here is an example of HTML code: <span class="state"> <label class="state button start" ...>"Start"</label> </span> <span class="name tracker_markup"> <span class="labels pre ...

pythonhtmlxpathselenium-webdriver

JavaScript Glitches

Embarking on the journey of web design and programming, I am venturing into the world of creating a simple gallery using JavaScript. Despite the convenience offered by jQuery, unfortunately, it is off-limits for this particular assignment. The challenge l ...

javascripthtml

Issue encountered when submitting form: Error identified as "Unexpected string expression without template curly in string"

As a novice in React.js, I am facing an issue where setState is not functioning properly when submitting a form. Any suggestions on how to resolve this problem? > class Home extends Component{ constructor(props){ > super(props) > ...

javascripthtmlcssreactjs

A guide on efficiently adding information into a MySQL database through the Spark Java framework

I'm a beginner with the Spark Java framework and need help inserting values into a MySQL database using SparkJava. Can anyone provide guidance? ...

mysqlangularjsjsp

What is the best way to emphasize a div depending on a query outcome?

A new application is in the works for a gaming project. This app is designed to display the location of a specific monster, utilizing a database containing information about monsters and their corresponding maps. Currently, the application functions almos ...

javascriptphpjquerycssajax

CSS Hover Effects on Navigation Bar Not Displaying as Expected

I was aiming to make one of my Navbar tabs stand out by having a different appearance compared to the others. However, there seems to be an issue with the text color for this particular tab in the hover state - it works inconsistently across different brow ...

htmlcsstwitter-bootstrap

Transferring MySQL information to web pages using hyperlinks within a table

We have encountered a challenge while working on our game shop website, specifically related to the purchase link. The link is displayed within a mysql table and currently directs users to the same page. Our goal is to optimize efficiency by adding new gam ...

phphtmlmysql

Tips for managing multiple user databases in Angular and Laravel

I'm currently working on an application that has multiple users who run reports on their accounts. All of these reports are generated in a temporary database, but the issue I've encountered is that one user's report can overwrite another use ...

phpangularjssql-serverlaravel

Tips for eliminating the page margin in Java when converting HTML using iTextPdf with HTMLConverter

No matter how hard I've tried, setting the body with padding: 0 and margin: 0, as well as attempting to set the doc() with setMargin, nothing seems to be effective ...

javahtmlcssitext

Enhancing the appearance of child elements using CSS modules in Next.js

My Countdown component implementation includes: import styles from "./Countdown.module.scss"; import React from "react"; import useTimer from "hooks/useTimer"; import cn from "classnames"; function Countdown({ date, ...

cssreactjsnext.jscss-modules

What is the best way to generate a personalized error message when an HTML5 required input pattern fails to meet the criteria?

I am facing an issue with the following code snippet: <input required pattern=".{6,}" class="big medium-margin" name="Password" placeholder="Password" size="25" type="password" /> After entering just one character, I receive a message that says: " ...

html

Retrieve an image using screen resolution parameters [using only HTML]

During a recent interview, the interviewer posed an interesting question regarding 2 images: There is one large resolution image that needs to be displayed on laptops and desktops. There is also a small image that should only be shown on mobile devices. ...

javascripthtmlcss

Implementing a function in ReactJS that is activated by multiple buttons

Apologies for the unclear title. My issue revolves around having three different button tags, each of which should send a unique argument to the function selectSupplier(). However, no matter which button is clicked, only the last value ("ultramar") is be ...

javascripthtmlnode.jsreactjs