how to create a custom tooltip using title attribute without jquery

Developer52

I want to create a tooltip as shown in pic. Value in title tag is coming from controller.

This is my table code:

<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>

Can anyone help me how to provide a tooltip like this.

NiZa

Something like this?

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-04-6

Comments

0 comments

Access bootstrap tooltip title attribute using jquery

Changing tooltip title using jQuery

jquery tooltip from html title attribute

How to prevent title attribute from showing tooltip?

How to remove tooltip but keep the 'title' attribute value

Changing content of a HTML element's 'title' attribute used for tooltip, using jquery or css

how to create a custom tooltip using title attribute without jquery

how to create a custom tooltip using title attribute without jquery

pump.io port in URL

How to import an asset in swift using Bundle.main.path() in a react-native native module

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Inner Loop design for webscrapping

Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

mysql.connector.errors.InterfaceError: 2003: Can't connect to MySQL server on '127.0.0.1:3306' (111 Connection refused)

Removed zsh, but forgot to change shell back to bash, and now Ubuntu crashes (wsl)

ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements

How to run blender on webserver?

Resetting Value of <input type="time"> in Firefox

Converting a class method to a property with a backing field

Ambiguous use of 'init' with CFStringTransform and Swift 3

Execute ./script.sh with a crontab

How to set tab order for array of cluster,where cluster elements have different data types in LabVIEW?

How to pass data to the ng2-bs3-modal?

Retrieve Element Tag Value XML Using Bash

Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

SQL Server : need add a dot before two last character

Making Array From Page Elements in jQuery

Laravel's ORM sync with timestamps doesn't update timestamps

Do animations stop css changes after animation completion?