如何使用title属性，而不jQuery来创建一个自定义工具提示 [英] how to create a custom tooltip using title attribute without jquery

问题描述

我想创建一个提示，如图照片。在标题标签值从控制器到来。

这是我的表code：

 ＆LT;表边框=1的cellpadding =10＆GT;
  ＆LT; TBODY风格=白色空间：NOWRAP;＆GT;
    ＆LT; TR NG重复=排排＆GT;
      ＆LT; TD风格=宽度：2％;＆GT;
        ＆LT;输入类型=复选框
               NG-模式=tableSelection [$指数]
               风格=保证金左：10px的;＆GT;
      ＆LT; / TD＆GT;
      ＆LT; TD风格=FONT-SIZE：小;宽度：27％;颜色：灰色;空格：NOWRAP;
          NG-重复=山坳中input_columns
          投掷的=dropable
          落FN =滴
          下拉式指数=$指数
          丢弃数据=山坳
          标题=
          NG-点击=openDialog（$事件，$指数）
          tempValue =＆GT;＆放大器; LT;输入数据和放大器; GT;＆LT; / TD＆GT;      ＆LT; TD风格=FONT-SIZE：小;宽度：27％;颜色：灰色;空格：NOWRAP;
          NG-重复=山坳中output_columns
          投掷的=dropable
          落FN =dropOutput
          下拉式指数=$指数
          丢弃数据=山坳
          标题=
          NG-点击=openDialogOutputConst（$事件，$指数）＆GT;＆放大器; LT;输入数据和放大器; GT;＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
  ＆LT; / TBODY＆GT;
＆LT; /表＆gt;
 

谁能帮我如何提供一个提示是这样的。

解决方案

这样呢？

\r

\r

TD {\r
  位置：相对;\r
}\r
\r
TD：悬停：前{\r
  内容：ATTR（数据称号）;\r
  位置：绝对的;\r
  背景色：黄色;\r
  顶：100％;\r
  宽度：200像素;\r
  白色空间：正常;\r
  字间距：200像素;\r
}

\r

＆LT;表边框=1的cellpadding =10＆GT;\r
  ＆LT; TBODY风格=白色空间：NOWRAP;＆GT;\r
    ＆LT; TR NG重复=排排＆GT;\r
      ＆LT; TD风格=宽度：2％;＆GT;\r
        ＆LT;输入类型=复选框NG模型=tableSelection [$指数]的风格=保证金左：10px的;＆GT;\r
      ＆LT; / TD＆GT;\r
      ＆LT; TD风格=FONT-SIZE：小;宽度：27％;颜色：灰色;空格：NOWRAP; NG-重复=山坳中input_columns投掷的=dropable下拉式FN =滴下拉式指数=$指数下降数据=山坳数据标题=爱达荷伊利诺伊印第安纳衣阿华堪萨斯密苏里州内布拉斯加俄亥俄\r
      NG-点击=openDialog（$事件，$指数）tempValue =＆GT;＆放大器; LT;输入数据和放大器; GT;＆LT; / TD＆GT;\r
\r
      ＆LT; TD风格=FONT-SIZE：小;宽度：27％;颜色：灰色;空格：NOWRAP; NG-重复=山坳中output_columns投掷的=dropable下拉式FN =dropOutput下拉式指数=$指数下降数据=山坳数据标题=这里有些文字NG点击= openDialogOutputConst（$事件，$指数）＆GT;＆放大器; LT;输入数据和放大器; GT;＆LT; / TD＆GT;\r
    ＆LT; / TR＆GT;\r
  ＆LT; / TBODY＆GT;\r
＆LT; /表＆gt;

\r

\r

\r

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.

解决方案

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>

这篇关于如何使用title属性，而不jQuery来创建一个自定义工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！