Web加悬浮tip显示

原始

{
  title: '链接URL',
  dataIndex: 'url',
  key: 'url',
  width: urlColumnWidth, // 使用主表格链接数列的宽度
  render: (url: string) => (
    <a 
      href={`https://${url}`} 
      target="_blank" 
      rel="noopener noreferrer"
      style={{ 
        color: '#1890ff',
        wordBreak: 'break-all',
        display: 'block',
        whiteSpace: 'nowrap',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
      }}
      title={url}
    >
      {isMobile && url.length > 30 
        ? `${url.substring(0, 30)}...`
        : url}
    </a>
  ),
},

加tip, 注意zIndex 防止显示在最底层了

{
  title: '链接URL',
  dataIndex: 'url',
  key: 'url',
  width: urlColumnWidth,
  render: (url: string) => {
    const urlAlias = getUrlalias ? getUrlalias(url) : '';
    return (
      <Tooltip
        title={urlAlias ? `别名: ${urlAlias}` : url}
        placement="top"
        mouseEnterDelay={0.5}
        overlayStyle={{
          zIndex: 100000, // 提高 z-index
        }}
      >
        <a 
          href={`https://${url}`} 
          target="_blank" 
          rel="noopener noreferrer"
          style={{ 
            color: '#1890ff',
            wordBreak: 'break-all',
            display: 'block',
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
          }}
          title={url}
        >
          {isMobile && url.length > 30 
            ? `${url.substring(0, 30)}...`
            : url}
        </a>
      </Tooltip>
    );
  },
},
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇