热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何在html工具提示[duplicate]中转义html-Howtoescapehtmlinsideahtmltooltip[duplicate]

Thisquestionalreadyhasananswerhere:这个问题已经有了答案:CanIusecomplexHTMLwithTwitter

This question already has an answer here:

这个问题已经有了答案:

  • Can I use complex HTML with Twitter Bootstrap's Tooltip? 5 answers
  • 我可以使用复杂的HTML与Twitter引导的工具提示吗?5个回答

I'm trying to print a tooltip with HTML, but I need to espace some of these html. I tried something but without success.

我正在尝试用HTML打印一个工具提示,但是我需要对其中的一些HTML进行空间定位。我试过了,但没有成功。

Here is my example: http://jsfiddle.net/wrsantos/q3o1e4ut/1/

这里是我的示例:http://jsfiddle.net/wrsantos/q3o1e4ut/1/

In this example I want to escape all html inside of .

在这个例子中,我想要从 <代码> 中退出所有的html。


    hover over me to see html

Javascript:

Javascript:

$('[rel="tooltip"]').tooltip();

EDIT:

编辑:

this is not a duplicate for (Can I use complex HTML with Twitter Bootstrap's Tooltip?)

这不是一个副本(我可以使用复杂的HTML和Twitter Bootstrap的工具提示吗?)

I want something like a "mixed mode" from html and non html tooltip.

我想要一些类似html和非html工具提示的“混合模式”。

In a tooltip I will have stylized content and non stylized content (the non stylized content will be inside a tag).

在工具提示中,我将使用程式化的内容和非程式化的内容(非程式化的内容将包含在标记中)。

3 个解决方案

#1


3  

This should do it.

这应该这样做。

var el = $('[rel="tooltip"]');
var escaped = $('
').text(el.attr('data-title')).html(); el.attr('data-title', escaped); el.tooltip();

EDIT: I misunderstood what you were trying to do. To escape just what's inside the tag, do this:

编辑:我误解你的意思了。要转义标记中的内容,请执行以下操作:

var el = $('[rel="tooltip"]');
var title = el.attr('data-title');
var code = /(.*?)<\/code>/.exec(title)[1];
var escaped = $('
').text(code).html(); title = title.replace(/.*?<\/code>/, '' + escaped + ''); el.attr('data-title', title); el.tooltip();

#2


2  

If you are needing rich media in your tool tip, then I would personally just use JQUERY, HTML Div tags and CSS to build it. Its simple enough and will allow you to create anything you like. Here is an example for you.

如果您需要丰富的媒体在您的工具提示,那么我个人将使用JQUERY, HTML Div标签和CSS来构建它。它足够简单,可以让你创造任何你喜欢的东西。这里有一个例子。




  
  
  
  
  
  
  
  



Tooltips can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.

But as it's not a native tooltip, it can be styled. Any themes built with ThemeRoller will also style tooltips accordingly.

Tooltips are also useful for form elements, to show some additional information in the context of each field.

Hover the field to see the tooltip.

#3


2  

You have to add it in the declaration of the tooltip:

您必须在工具提示声明中添加:

$('[rel="tooltip"]').attr('data-title', $('[rel="tooltip"]').attr('data-title') + "").tooltip(); 

Remove it from the HTML:

从HTML中删除它:


    hover over me to see 
    

FIDDLE: http://jsfiddle.net/q3o1e4ut/7/

小提琴:http://jsfiddle.net/q3o1e4ut/7/


推荐阅读
  • pythonMatplotlib(二)
    Matplotlib+pandas作图一、对csv文件进行提取ruixi.csv对上述表格进行提取并做图画出图像二、对.xlsx进行提取:rui ... [详细]
  • 我用Tkinter制作了一个图形用户界面,有两个主按钮:“开始”和“停止”。请您就如何使用“停止”按钮终止“开始”按钮为以下代码调用的已运行功能提供建议 ... [详细]
  • 十六.增加一个项目协作留言板功能(二)----- 建立一个任务管理的列表页面
    我们设计一个页面来展示正在处理的任务,该表格可以参照之前基础信息的增删改查。用户通过这个页面对任务进行相应操作。1.在views. ... [详细]
  • 本文介绍了南邮ctf-web的writeup,包括签到题和md5 collision。在CTF比赛和渗透测试中,可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型,可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细]
  • ASP.NET2.0数据教程之十四:使用FormView的模板
    本文介绍了在ASP.NET 2.0中使用FormView控件来实现自定义的显示外观,与GridView和DetailsView不同,FormView使用模板来呈现,可以实现不规则的外观呈现。同时还介绍了TemplateField的用法和FormView与DetailsView的区别。 ... [详细]
  • 网址:https:vue.docschina.orgv2guideforms.html表单input绑定基础用法可以通过使用v-model指令,在 ... [详细]
  • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
  • [echarts] 同指标对比柱状图相关的知识介绍及应用示例
    本文由编程笔记小编为大家整理,主要介绍了echarts同指标对比柱状图相关的知识,包括对比课程通过率最高的8个课程和最低的8个课程以及全校的平均通过率。文章提供了一个应用示例,展示了如何使用echarts制作同指标对比柱状图,并对代码进行了详细解释和说明。该示例可以帮助读者更好地理解和应用echarts。 ... [详细]
  • 站点用户可以在站点上注册,并且在注册期间可以提供名称.我希望此名称是有效名称,并且不包含任何HTML和其他时髦字符.strip_tags够吗?解决方法: ... [详细]
  • 属性字符串NSMutableAttributedString
    要实现如下效果:NSString*mailStringmymail126.com;NSString*mailStringWithQuotes[NSStringst ... [详细]
  • MVC中的自定义控件
    怎么样创建自定义控 ... [详细]
  • 前言对于从事技术的人员来说ajax是这好东西,都会使用,而且乐于使用。但对于新手,开发一个ajax实例,还有是难度的,必竟对于他们这是新东西。leo开发一个简单的ajax实例,用的是 ... [详细]
  • 表单提交前的最后验证:通常在表单提交前,我们必须确认用户是否都把必须填选的做了,如果没有,就不能被提交到服务器,这里我们用到表单的formname.submit()看演示,其实这个对于我们修炼道 ... [详细]
  • Itwasworkingcorrectly,butyesterdayitstartedgiving401.IhavetriedwithGooglecontactsAPI ... [详细]
  • Scrapy 爬取图片
    1.创建Scrapy项目scrapystartprojectCrawlMeiziTuscrapygenspiderMeiziTuSpiderhttps:movie.douban.c ... [详细]
author-avatar
手机用户2502937345
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有