仿Google地图Tooltip

最新推荐文章于 2020-05-09 10:05:52 发布

SuperCustomer

最新推荐文章于 2020-05-09 10:05:52 发布

阅读量1.1k

点赞数

分类专栏： Web 文章标签： google javascript class div border stylesheet

本文链接：https://blog.csdn.net/supercustomer/article/details/6080162

版权

这篇博客展示了如何使用HTML、CSS和JavaScript创建一个仿Google地图样式的Tooltip。通过HTML结构设定Tooltip的内容布局，CSS定义样式，JavaScript实现动态创建和定位Tooltip。Tooltip包括了多个元素，如关闭按钮、内容区域以及不同位置的图像边框。

摘要由CSDN通过智能技术生成

1、HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <mce:script type="text/javascript" src="../jquery/jquery-1.4.2.min.js" mce_src="jquery/jquery-1.4.2.min.js"></mce:script> <mce:script type="text/javascript" src="../script/tooltip.js" mce_src="script/tooltip.js"></mce:script> <link rel="stylesheet" type="text/css" href="../css/tooltip.css" mce_href="css/tooltip.css"> <title>tool tip</title> </head> <body> <div id="container"> <div class="tooltip"> <div class="content"> <div class="close_btn"></div> <div class="content_div"> <div class="content_top">地址：</div> <div class="content_middle">湖北省武汉市洪山区</div> <div class="content_bottom"> <a href="javascript:void(0);" mce_href="javascript:void(0);">获取路线</a> <a href="javascript:void(0);" mce_href="javascript:void(0);">在附近搜索</a> <a href="javascript:void(0);" mce_href="javascript:void(0);">保存到...</a> <a href="javascript:void(0);" mce_href="javascript:void(0);">更多</a>